Merge branch 'dev' of github.com:opentiny/tiny-vue into wyp/tree-menu-xdsign-0910

Author: wuyiping0628

examples/docs/newsrc/pc.vue

@@ -96,8 +96,14 @@
         </div>
       </div>
     </tiny-floatbar>
-    <!-- 切换主题 -->
-    <tiny-dropdown class="!fixed bottom20 right140" :show-icon="false" @item-click="changeTheme" :disabled="isSaasMode">
+    <!-- 切换主题 暂时先屏蔽，等后续其他主题验收完成再放出此功能 -->
+    <tiny-dropdown
+      v-if="false"
+      class="!fixed bottom20 right140"
+      :show-icon="false"
+      @item-click="changeTheme"
+      :disabled="isSaasMode"
+    >
       <span title="切换主题">
         <SvgTheme></SvgTheme>
       </span>
@@ -152,7 +158,6 @@ import {
 import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
 import Loading from '@opentiny/vue-loading'
 import designSmbConfig from '@opentiny/vue-design-smb'
-import designAuroraConfig from '@opentiny/vue-design-aurora'
 import designSaasConfig from '@opentiny/vue-design-saas'
 import { menuData, demoStr, demoVue, mds, demos } from './resourcePc.js'
 import { useTheme, useModeCtx } from './uses'
@@ -194,7 +199,7 @@ export default {
       currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`]),
       demoLoading: false
     })
-    // hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。 
+    // hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。
     const huiNewChart = ['chart-process']
     const fn = {
       // 菜单搜索：忽略大小写
@@ -258,9 +263,10 @@ export default {
       modeFn.pushToUrl()
     }
 
+    // 默认全部使用designSmbConfig，后续验收完毕再调整
     const designConfigMap = {
       'tiny-smb-theme': designSmbConfig,
-      'tiny-aurora-theme': designAuroraConfig
+      'tiny-aurora-theme': designSmbConfig
     }
 
     const lastThemeKey = localStorage.getItem('tinyThemeToolkey')

examples/docs/newsrc/uses/useTheme.js

@@ -1,5 +1,4 @@
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
-import { tinyAuroraTheme, tinySmbTheme, tinyInfinityTheme } from '@opentiny/vue-theme/theme'
 import { hooks } from '@opentiny/vue-common'
 import { Notify } from '@opentiny/vue'
 
@@ -21,9 +20,9 @@ export function useTheme({ readCacheImmediate = true } = {}) {
   const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
 
   const THEME_MAP = {
-    'tiny-aurora-theme': tinyAuroraTheme,
-    'tiny-smb-theme': tinySmbTheme,
-    'tiny-infinity-theme': tinyInfinityTheme
+    'tiny-aurora-theme': null,
+    'tiny-smb-theme': null,
+    'tiny-infinity-theme': null
   }
 
   const changeTheme = ({ vm }) => {

examples/docs/package.json

@@ -3,24 +3,24 @@
   "type": "module",
   "version": "1.0.8",
   "description": "",
-  "keywords": [],
   "author": "",
   "license": "ISC",
+  "keywords": [],
+  "files": [
+    "resources"
+  ],
   "dependencies": {
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-design-aurora": "workspace:~",
+    "@opentiny/vue-design-saas": "workspace:~",
+    "@opentiny/vue-design-smb": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~",
     "@opentiny/vue-theme-saas": "workspace:~",
-    "@opentiny/vue-design-aurora": "workspace:~",
-    "@opentiny/vue-design-smb": "workspace:~",
-    "@opentiny/vue-design-saas": "workspace:~",
     "sortablejs": "1.15.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.42.0"
-  },
-  "files": [
-    "resources"
-  ]
-}
+  }
+}

examples/sites/demos/apis/steps.js

@@ -221,6 +221,21 @@ export default {
           pcDemo: 'slot-item',
           mfDemo: ''
         },
+        {
+          name: 'itemFooter',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '步骤条数据项底部插槽，用于条形步骤条',
+            'en-US': 'Step bar data item bottom slot, used for bar steps'
+          },
+          meta: {
+            stable: '3.19.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-item-footer',
+          mfDemo: ''
+        },
         {
           name: 'prefix',
           type: '',

examples/sites/demos/pc/app/badge/basic-usage.spec.ts

@@ -10,6 +10,6 @@ test('测试基本用法', async ({ page }) => {
 
   await expect(textWrapper).toContainText('我的待办')
   await expect(badge).toContainText('2')
-  await expect(badge).toHaveCSS('background-color', 'rgb(246, 111, 106)')
+  await expect(badge).toHaveCSS('background-color', 'rgb(242, 48, 48)')
   await expect(badge).toHaveCSS('color', 'rgb(255, 255, 255)')
 })

examples/sites/demos/pc/app/badge/offset-composition-api.vue

@@ -2,14 +2,40 @@
   <div>
     <p>使用字符串：</p>
     <br />
-    <tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
     <br /><br />
     <p>使用数字：</p>
     <br />
-    <tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="[0, -8]">我的待办</tiny-badge>
+    <br /><br />
+    <p>区域使用：</p>
+    <br />
+    <div class="demo-box">
+      <tiny-badge :value="9" :max="9" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="99" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="100" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="1000" :max="999" :offset="['-50%', '-212%']"
+        ><div class="demo-badge-offset"></div
+      ></tiny-badge>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { Badge as TinyBadge } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.demo-badge-offset {
+  display: inline-block;
+  width: 60px;
+  height: 40px;
+  background-color: gainsboro;
+}
+.demo-box {
+  width: 400px;
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+}
+</style>

examples/sites/demos/pc/app/badge/offset.spec.ts

@@ -5,8 +5,9 @@ test('标记的位置', async ({ page }) => {
   await page.goto('badge#offset')
 
   const demo = page.locator('#offset')
-  const badge = demo.locator('.tiny-badge')
+  const badge = demo.locator('div').filter({ hasText: /^2$/ }).first()
+  const badge2 = demo.locator('div').filter({ hasText: /^2$/ }).nth(1)
 
-  await expect(badge.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -4)')
-  await expect(badge.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -6)')
+  await expect(badge).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -8)')
+  await expect(badge2).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -8)')
 })

examples/sites/demos/pc/app/badge/offset.vue

@@ -2,11 +2,22 @@
   <div>
     <p>使用字符串：</p>
     <br />
-    <tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
     <br /><br />
     <p>使用数字：</p>
     <br />
-    <tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="[0, -8]">我的待办</tiny-badge>
+    <br /><br />
+    <p>区域使用：</p>
+    <br />
+    <div class="demo-box">
+      <tiny-badge :value="9" :max="9" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="99" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="100" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="1000" :max="999" :offset="['-50%', '-212%']"
+        ><div class="demo-badge-offset"></div
+      ></tiny-badge>
+    </div>
   </div>
 </template>
 
@@ -19,3 +30,18 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-badge-offset {
+  display: inline-block;
+  width: 60px;
+  height: 40px;
+  background-color: gainsboro;
+}
+.demo-box {
+  width: 400px;
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+}
+</style>

examples/sites/demos/pc/app/badge/type.spec.ts

@@ -15,11 +15,11 @@ test('主題样式', async ({ page }) => {
   await expect(dangerBadge).toHaveClass(/tiny-badge--danger/)
   await expect(dangerBadge).toHaveCSS('background-color', 'rgb(246, 111, 106)')
   await expect(primaryBadge).toHaveClass(/tiny-badge--primary/)
-  await expect(primaryBadge).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+  await expect(primaryBadge).toHaveCSS('background-color', 'rgb(25, 25, 25)')
   await expect(successBadge).toHaveClass(/tiny-badge--success/)
-  await expect(successBadge).toHaveCSS('background-color', 'rgb(80, 212, 171)')
+  await expect(successBadge).toHaveCSS('background-color', 'rgb(92, 179, 0)')
   await expect(warningBadge).toHaveClass(/tiny-badge--warning/)
-  await expect(warningBadge).toHaveCSS('background-color', 'rgb(250, 152, 65)')
+  await expect(warningBadge).toHaveCSS('background-color', 'rgb(255, 136, 0)')
   await expect(infoBadge).toHaveClass(/tiny-badge--info/)
-  await expect(infoBadge).toHaveCSS('background-color', 'rgb(37, 43, 58)')
+  await expect(infoBadge).toHaveCSS('background-color', 'rgb(25, 25, 25)')
 })

examples/sites/demos/pc/app/button/dynamic-disabled.spec.ts

@@ -10,15 +10,15 @@ test('测试禁用状态是否生效', async ({ page }) => {
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-button').first()).toBeDisabled()
-  await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(245, 245, 246)')
-  await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(173, 176, 184)')
-  await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(223, 225, 230)')
+  await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(240, 240, 240)')
+  await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(194, 194, 194)')
+  await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(240, 240, 240)')
   await expect(demo.getByRole('button', { name: '次要按钮' }).first()).toBeDisabled()
   await expect(demo.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
   await expect(demo.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()
-  await expect(ghostBtn).toHaveCSS('color', 'rgb(173, 176, 184)')
+  await expect(ghostBtn).toHaveCSS('color', 'rgb(194, 194, 194)')
   await expect(ghostBtn).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(ghostBtn).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
+  await expect(ghostBtn).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-button').first()).not.toBeDisabled()