vdesign-ui 0.2.17 → 0.2.19

package/README.md

@@ -1,78 +1,59 @@
-# vdesign-ui
 
-## 项目说明
-
-### 项目运行
-
-```
-cd hs-ui
-yarn install
-yarn run serve
-```
-
-### 目录结构
-
-#### packages
->
-> 主要包含 token2css 后的产物，及组件
-
-- index.js 为入口文件
-- token：token2css 转换后的 css 文件
-- components：基于 token 变量的 vue 组件
-
-#### sites
->
-> 主要包含该组件库的站点，用于文档描述
-
-- docs：md 文档集合
-- router/nav.config.json：菜单配置文件
-
-#### Git 提交规范
-
-- feat: 增加订单详情  closes xxxx (closes非必需)
-- fix: 修复xx情况下xx问题  closes xxxx (closes非必需)
-- docs: 修改md文件
-- style: 修改订单列表样式
-- refactor: 重构utils.js下部分方法
-- chore: 增加xxx插件/xxxxloader
-- revert: 回退当前版本667ec到 sssee2
-- perf: 优化了xxx，提高了渲染速度
-- test：增加测试
-- improvement: 改进
-- build: 打包
-- ci: 持续集成w
-
-#### 修改 Git Commit
-
-##### 1. 修改最后一次提交
-
-git commit --amend
-
-该命令会创建一个提交并覆盖上次提交，如果是因为写错或者不满意上次的提交信息，使用该命令就非常适合。
-
-##### 2. 合并多条提交
-
-git reset --soft [commitID]
-
-如果你想合并最近几条提交信息的话，那么就需要使用上面的命令来操作，指定要撤销的ccommitId,该命令会保留当前改动并撤销指定提交后的所有commit记录，如果不指定ID的话可以使用HEAD~{num} 来选择最近{num}条提交
-
-git reset --soft HEAD~2 #合并最近两条提交
-git commit -m 'feat: add new feat'
-
-> 带 --soft 参数的区别在于把改动内容添加到暂存区 相当于执行了git add .
-
-git rebase -i
-git rebase的功能会更加强大，如果我想修改最近3条提交记录，执行
-
-`git rebase -i  HEAD~3`
-
-下面是常用的命令说明：
-
-```bash
-p,pick = 使用提交
-r,reword = 使用提交，但修改提交说明
-e,edit = 使用提交，退出后使用git commit --amend 修改
-s,squash = 使用提交，合并前一个提交
-f,fixup = 和squash相同，但丢弃提交说明日志
-d,drop = 删除提交，丢弃提交记录
-```
+# 📦 vdesign-ui 项目结构说明
+
+本项目为 `vdesign-ui` 前端组件库，包含组件源码、构建脚本、设计 Tokens、多语言配置等。以下是项目目录结构与主要文件说明。
+
+## 📁 目录结构
+
+```text
+vdesign-ui/
+├── bin/                         # 构建与工具脚本目录
+│   ├── backup-token-css.js      # 备份 token.css 文件（保存至 dist-token-history，文件名带时间戳）
+│   ├── build-components.js      # 构建 packages/components 下的组件并输出到 dist/components，按需加载，暂未用到
+│   ├── concat-css.js            # 合并 tokens 中多个 CSS 文件为 token.css
+│   ├── copy-locales.js          # 拷贝 packages/locale 的内容到 dist/locale
+│   └── node.js                  # 输出官网导航目录
+├── dist/                        # 构建输出目录
+│   ├── components/              # 拷贝组件
+│   ├── locale/                  # 拷贝语言资源
+│   ├── demo.html                # 构建预览页面（可能用于调试或预览组件）
+│   ├── token.css                # 当前 Design Token 输出样式
+│   ├── vdesign-ui.common.js     # CommonJS 格式构建文件
+│   ├── vdesign-ui.css           # 所有样式文件合并后的主 CSS
+│   ├── vdesign-ui.umd.js        # UMD 构建文件（未压缩）
+│   ├── vdesign-ui.umd.min.js    # UMD 构建文件（压缩版）
+│   └── dist-token-history/      # 历史 Token 样式备份（时间戳命名）
+│       ├── token_20250314_155751.css
+│       ├── token_20250314_160005.css
+│       ├── token_20250314_160803.css
+│       ├── token_20250321_171830.css
+│       ├── token_20250324_152753.css
+│       ├── token_20250324_153128.css
+│       ├── token_20250325_114906.css
+│       └── token_20250326_170122.css
+├── node_modules/                # 项目依赖模块
+├── packages/                    # 源码主目录
+│   ├── components/              # Vue 组件源码（Button、Uploader 等）
+│   ├── locale/                  # 多语言支持
+│   │   ├── lang/                # 多语言翻译文件（如 zh-CN.js / en-US.js）
+│   │   └── i18nPlugin.js        # 国际化插件封装（用于 Vue 插件注册）
+│   └── tokens/                  # Design Token 配置（设计样式原子值）
+│       ├── css/                 # 生成后的 CSS Token 文件
+│       ├── fonts/               # 字体资源
+│       ├── js/                  # 获取以及生成Token数据
+│       ├── index.css            # 主样式文件
+│       ├── reset.css            # 样式重置文件
+│       └── style.css            # 组件通用样式
+│   └──index.js                     # 项目主入口（可能用于组件库导出）
+├── sites/                       # 主要包含该组件库的站点，用于文档描述
+│   ├── assets/                  # 静态资源（如图片、图标）
+│   ├── components/              # 站点使用的公共组件
+│   ├── demos/                   # 组件演示页面（提供交互效果展示）
+│   ├── docs/                    # 文档页面（介绍使用说明、API 参考等）
+│   ├── i18n/                    # 站点的国际化支持
+│   ├── json/                    # json格式的Token数据
+│   ├── pages/                   # 站点页面路由（测试页面）
+│   ├── router/                  # Vue 路由配置
+│   ├── App.vue                  # 站点 Vue 入口文件
+│   ├── insetTables.js           # Token数据插入到demo页面
+│   └── main.js                  # 站点主入口文件

package/dist/components/radio/style.less

@@ -143,23 +143,22 @@
         }
     }
 
-    .@{radio-prefix-cls}-group {
+    // .@{radio-prefix-cls}-group {
 
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-check_radio-group-margin_x);
+    //     display: flex;
+    //     flex-direction: column;
+    //     gap: var(--spacing-check_radio-group-margin_x);
 		
-		&-card{
-			display: flex;
-			flex-wrap: wrap;
-            flex-direction: row;
-			gap: 12px;
-			
-			.vd-radio-button-cell{
-				flex: 1;
-			}
-		}
-    }
+	// 	&-card{
+	// 		display: flex;
+	// 		flex-wrap: wrap;
+    //         flex-direction: row;
+	// 		gap: 12px;
+	// 		.vd-radio-button-cell{
+	// 			flex: 1;
+	// 		}
+	// 	}
+    // }
 
 
 
@@ -278,14 +277,22 @@
     .@{radio-prefix-cls}-group {
         display: flex;
         flex-direction: column;
-        gap: var(--spacing-check_radio-group-margin_x);
-
+        // gap: var(--spacing-check_radio-group-margin_x);
+        margin-bottom: calc(var(--spacing-check_radio-group-margin_x) * -1);
+        .@{radio-prefix-cls}{
+            margin-bottom: var(--spacing-check_radio-group-margin_x);
+        }
         &__card{
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
-			gap: 12px;
-
+			// gap: 12px;
+            margin-bottom: -12px;
+            margin-inline-end: -12px;
+            .@{radio-button-prefix-cls}{
+                margin-bottom: 12px;
+                margin-inline-end: 12px;
+            }
         }
 
         .@{radio-button-prefix-cls}{

package/dist/components/tabs/index.vue

@@ -1,26 +1,30 @@
 <template>
   <div class="vd-tabs" :class="stickyClasses">
     <div class="vd-tabs__wrap" :class="menuClasses" ref="wrap">
-      <div class="vd-tabs__nav" :class="[barType, scrollspyClasses]" ref="nav">
-        <div
-          v-for="(tab, index) in tabs"
-          :key="tab.name !== undefined ? tab.name : index"
-          :class="[tabClasses(tab, index), lineClasses]"
-          @click="onClick(tab, index)"
-          ref="tabItems"
-        >
-          <span class="vd-tab__text" :class="ellipsisClasses"  ref="title"
+      <div class="vd-tabs__scroll" ref="scroll">
+        <div class="vd-tabs__scroll--left" v-show="firstTabOut"></div>
+        <div class="vd-tabs__nav" :class="[barType, scrollspyClasses]" ref="nav">
+          <div
+            v-for="(tab, index) in tabs"
+            :key="tab.name !== undefined ? tab.name : index"
+            :class="[tabClasses(tab, index), lineClasses]"
+            @click="onClick(tab, index)"
+            ref="tabItems"
           >
-            {{ tab.title }}
-            <!-- <vd-icon
-              class="vd-tab__arrow"
-              v-if="tab.arrow"
-              name="icon_btn_moredown"
-            ></vd-icon> -->
-          </span>
+            <span class="vd-tab__text" :class="ellipsisClasses"  ref="title"
+            >
+              {{ tab.title }}
+              <!-- <vd-icon
+                class="vd-tab__arrow"
+                v-if="tab.arrow"
+                name="icon_btn_moredown"
+              ></vd-icon> -->
+            </span>
+          </div>
         </div>
-      </div>
-      <div class="vd-tabs__menu--right" v-if="menu">
+        <div class="vd-tabs__scroll--right" v-show="lastTabOut"></div>
+     </div>
+      <div class="vd-tabs__menu--right" :class="{'vd-tabs__menu--margin':lastTabOut}" v-if="menu">
         <vd-icon
           :name="menuIconComputed"
           class="vd-tabs__menu--btn"
@@ -75,6 +79,7 @@ export default {
       tabs: [],
       currentName: this.value !== undefined ? this.value : 0, // 默认为 0
       firstTabOut: false, // 第一个标签是否超出
+      lastTabOut: false
     };
   },
   watch: {
@@ -130,7 +135,7 @@ export default {
         [`${prefixCls}__menu`]: this.menu,
         [`${prefixCls}__wrap--bg`]: this.backgroundColor,
         "vd-hairline--bottom": this.divider,
-        "vd-tabs__scroll": this.firstTabOut, // 当第一个标签超出时，添加滚动类名
+        // "vd-tabs__scroll": this.firstTabOut, // 当第一个标签超出时，添加滚动类名
       };
     },
     // 计算标签下方线条的类名
@@ -272,9 +277,11 @@ export default {
         if (this.language === 'ar') {
           // 在 RTL 模式下，scrollLeft 可能为负，判断是否滚出视口可以检测 scrollLeft 是否小于 0
           this.firstTabOut = nav.scrollLeft < 0;
+          // this.lastTabOut  = nav.scrollLeft < 0;
         } else {
           // LTR 模式下，滚出视口时 scrollLeft 大于 0
           this.firstTabOut = nav.scrollLeft > 0;
+          this.lastTabOut  = Math.ceil(nav.scrollLeft + nav.clientWidth) < nav.scrollWidth;
         }
       }
     },
@@ -323,6 +330,7 @@ export default {
     // 初始加载时，滚动到当前激活的标签
     this.$nextTick(() => {
       this.scrollToActiveTab();
+      this.checkFirstTabOverflow()
       if (this.$refs.nav) {
         this.$refs.nav.addEventListener('scroll', this.checkFirstTabOverflow);
       }

package/dist/components/tabs/style.less

@@ -313,27 +313,58 @@
   }
   
   &__scroll {
-    &::before {
-      content: '';
-      position: absolute;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      width: 20px;
-      height: 48px;
-      background-color: var(--bg-color-1);
+    overflow-x: auto;
+    position: relative;
+    &--left{
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        width: 20px;
+        height: 48px;
+        background-color: var(--bg-color-1);
+      }
+      &::after {
+        content: '';
+        box-shadow: 4px 0 6px rgba(0, 0, 0, 0.05);
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        width: 20px;
+        height: 30px;
+        background-color: transparent;
+      } 
     }
-    &::after {
-      content: '';
-      box-shadow: 4px 0 6px rgba(0, 0, 0, 0.05);
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      left: 0;
-      width: 20px;
-      height: 30px;
-      background-color: transparent;
-    } 
+    &--right{
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
+        width: 20px;
+        height: 48px;
+        background-color: var(--bg-color-1);
+      }
+      &::after {
+        content: '';
+        box-shadow: -4px 0 6px rgba(0, 0, 0, 0.05);
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
+        width: 20px;
+        height: 30px;
+        background-color: transparent;
+      } 
+  }
+
+
   }
   
   &__menu {
@@ -344,22 +375,26 @@
 
     &--right {
       position: relative;
+      z-index: 2;
+      // margin-inline-start: -12px;
       display: flex;
       height: var(--icon-large);
       padding-inline-end: var(--spacing-tab-primary_icon-margin_right);
       color: var(--text-color-h1);
 
-      &::before {
-        content: '';
-        position: absolute;
-        margin-inline-start: -16px;
-        width: 16px;
-        height: 100%;
-        background-image: linear-gradient(to left, var(--bg-color-1) 0%, rgba(255, 255, 255, 0) 100%);
-      }
-
+      // &::before {
+      //   content: '';
+      //   position: absolute;
+      //   margin-inline-start: -16px;
+      //   width: 16px;
+      //   height: 100%;
+      //   background-image: linear-gradient(to left, var(--bg-color-1) 0%, rgba(255, 255, 255, 0) 100%);
+      // }
 
     }
+    &--margin{
+      margin-inline-start: -12px;
+    }
     &--btn {
       cursor: pointer;
       font-size: var(--icon-large)!important;
@@ -426,17 +461,17 @@
 
 
 [lang='ar'] {
-  .@{tabs-prefix-cls}__scroll {
-    &::before {
-      right: 0;
-      left: auto;
-    }
-    &::after {
-      right: 0;
-      left: auto;
-      box-shadow: -4px 0 6px rgba(0, 0, 0, 0.05);
-    } 
-  }
+  // .@{tabs-prefix-cls}__scroll {
+  //   &::before {
+  //     right: 0;
+  //     left: auto;
+  //   }
+  //   &::after {
+  //     right: 0;
+  //     left: auto;
+  //     box-shadow: -4px 0 6px rgba(0, 0, 0, 0.05);
+  //   } 
+  // }
   .@{tabs-prefix-cls}__menu--right::before {
     transform: scaleX(-1);
   }
@@ -451,9 +486,9 @@
 }
 
 [theme='dark'][lang='ar']{
-  .@{tabs-prefix-cls}__scroll {
-    &::after {
-      box-shadow: -4px 0 6px rgba(0, 0, 0, 0.35);
-    } 
-  }
+  // .@{tabs-prefix-cls}__scroll {
+  //   &::after {
+  //     box-shadow: -4px 0 6px rgba(0, 0, 0, 0.35);
+  //   } 
+  // }
 }