@ithinkdt/ui 4.0.0-20 → 4.0.0-21

package/locale.d.ts

@@ -29,6 +29,7 @@ export interface UILocale {
     account: {
         logout: string
         changePwd: string
+        changeTenant: string
     }
     notification: {
         tip: (params: { count?: number | null }) => string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.0-20",
+  "version": "4.0.0-21",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -84,11 +84,11 @@
     "@vitejs/plugin-vue-jsx": "^5.1.1",
     "ithinkdt-ui": "^1.7.3",
     "typescript": "~5.9.3",
-    "unocss": ">=66.5.3",
-    "vite": "npm:rolldown-vite@^7.1.16",
+    "unocss": ">=66.5.4",
+    "vite": "npm:rolldown-vite@^7.1.17",
     "vue": "^3.5.22",
-    "vue-router": "^4.5.1",
-    "@ithinkdt/page": "^4.0.0-12"
+    "vue-router": "^4.6.0",
+    "@ithinkdt/page": "^4.0.0-13"
   },
   "scripts": {
     "release": "pnpm publish --no-git-checks"

package/src/design/Account.jsx

@@ -133,6 +133,8 @@ export const AppAccount = /* @__PURE__ */ defineComponent({
                         }}
                     </NPopover>
 
+                    {slots.extra?.()}
+
                     {props.showLogoutButton
                         ? withDirectives(
                                 <NButton

package/src/design/Tenant.jsx

@@ -0,0 +1,88 @@
+import { NAvatar, NButton, NDropdown, NIcon } from 'ithinkdt-ui'
+import { computed, defineComponent } from 'vue'
+
+import { useI18n } from '../use-i18n.js'
+
+const ICheck = props => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        role="img"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        {...props}
+    >
+        <path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z" />
+    </svg>
+)
+
+export const AppTenant = /* @__PURE__ */ defineComponent({
+    name: 'AppTenant',
+    props: {
+        options: Array,
+        current: String,
+    },
+    emit: ['update:current'],
+    setup(props, { emit }) {
+        const { t } = useI18n()
+
+        const renderLabel = (op) => {
+            if (op.disabled) return <div>{op.name}</div>
+            return (
+                <div style="display: flex; align-items: center; justify-content: space-between; gap: 20px">
+                    <div style="display: flex; align-items: center; gap: 8px">
+                        <NAvatar round size={22} color="var(--color-primary-hover)">{op.icon?.() || op.name[0]}</NAvatar>
+                        <span style={op.id === props.current ? 'color: var(--color-primary)' : ''}>{op.name}</span>
+                    </div>
+                    {op.id === props.current ? <ICheck style="color: var(--color-primary); font-size: 20px" /> : <div />}
+                </div>
+            )
+        }
+
+        const options = computed(() => [
+            { id: '___', name: t('common.account.changeTenant'), disabled: true },
+            ...(props.options ?? []),
+        ])
+        return () => {
+            if (!props.options?.length) return
+            const current = props.options.find(it => it.id === props.current)
+
+            return (
+                <NDropdown
+                    options={options.value}
+                    placement="bottom-end"
+                    keyField="id"
+                    labelField="name"
+                    showArrow
+                    renderLabel={renderLabel}
+                    onSelect={current => current !== props.current && emit('update:current', current)}
+                >
+                    <NButton quaternary style="--n-padding: 0 6px">
+                        {{
+                            icon: () => (
+                                <NIcon size="18">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                                        viewBox="0 0 1024 1024"
+                                        width="1em"
+                                        height="1em"
+                                        role="img"
+                                    >
+                                        <path
+                                            d="M728 600.2c8.1-13.2 4-30.4-9.1-38.5-30.7-19-63.6-33.8-97.8-44.4 69.4-43 115.6-119.8 115.6-207.4C736.7 175.2 627.5 66 492.8 66S249 175.2 249 309.9c0 88.2 46.8 165.5 117 208.3-12.9 4.1-25.6 8.8-38.1 14.1-51.1 21.8-97 53-136.4 92.7-39.4 39.7-70.3 85.9-91.9 137.4-22.4 53.3-33.7 109.9-33.7 168.2 0 15.5 12.5 28 28 28s28-12.5 28-28c0-207.5 167.4-376.3 373.2-376.3 68.8 0 136.1 19 194.4 55 13.1 8.2 30.4 4.1 38.5-9.1zM305 309.9c0-50.2 19.5-97.4 55-132.8 35.5-35.5 82.7-55 132.8-55 50.2 0 97.4 19.5 132.8 55 35.5 35.5 55 82.7 55 132.8s-19.5 97.4-55 132.8c-35.5 35.5-82.7 55-132.8 55-50.2 0-97.4-19.5-132.8-55-35.5-35.5-55-82.6-55-132.8zM606.2 746.4h325.1c11.3 0 21.5-6.8 25.9-17.3s1.9-22.5-6.1-30.5L844.5 592.1c-10.9-10.9-28.7-10.9-39.6 0-10.9 10.9-10.9 28.7 0 39.6l58.7 58.6H606.2c-15.5 0-28 12.5-28 28s12.6 28.1 28 28.1zM931.4 794.6H606.3c-11.3 0-21.5 6.8-25.9 17.3s-1.9 22.5 6.1 30.5l106.6 106.4c5.5 5.5 12.6 8.2 19.8 8.2 7.2 0 14.4-2.7 19.8-8.2 10.9-10.9 10.9-28.7 0-39.6L674 850.6h257.4c15.5 0 28-12.5 28-28s-12.5-28-28-28z"
+                                            fill="currentColor"
+                                        >
+                                        </path>
+                                    </svg>
+                                </NIcon>
+                            ),
+                            default: () => current.shotName || current.name,
+                        }}
+                    </NButton>
+                </NDropdown>
+            )
+        }
+    },
+})

package/src/design/index.js

@@ -1,10 +1,11 @@
-export { AppContent, AppFooter, AppHeader, AppLayout, AppSider } from './Layout.jsx'
-export { AppLogo } from './Logo.jsx'
-export { AppMenu } from './Menu.jsx'
-export { AppBreadcrumb } from './Breadcrumb.jsx'
 export { AppAccount } from './Account.jsx'
-export { AppFullscreen } from './Fullscreen.jsx'
 export { AppAppearance } from './Appearance.jsx'
+export { AppBreadcrumb } from './Breadcrumb.jsx'
+export { AppFullscreen } from './Fullscreen.jsx'
 export { AppLanguage } from './Language.jsx'
-export { AppNotification } from './Notification.jsx'
+export { AppContent, AppFooter, AppHeader, AppLayout, AppSider } from './Layout.jsx'
+export { AppLogo } from './Logo.jsx'
+export { AppMenu } from './Menu.jsx'
 export { AppMultiTabs } from './MultiTabs.jsx'
+export { AppNotification } from './Notification.jsx'
+export { AppTenant } from './Tenant.jsx'

package/src/design.d.ts

@@ -154,6 +154,7 @@ export declare const AppAccount: (
     },
     context: {
         slots: {
+            extra?: (() => VNode) | undefined
             logoutButton?: (() => VNode) | undefined
             dropdown?: ((binding: { ChangePwd: Component, Logout: Component }) => VNode) | undefined
             dropdownExtra?: (() => VNode) | undefined
@@ -232,3 +233,11 @@ export interface NotificationProps {
 }
 
 export declare const AppNotification: (props: PublicProps & NotificationProps) => VNode
+
+export interface TenantProps {
+    'options': { id: string, name: string, shotName?: string | undefined, icon?: () => VNodeChild }[] | undefined
+    'current': string | undefined
+    'onUpdate:current'?: ((current: string) => void) | undefined
+}
+
+export declare const AppTenant: (props: PublicProps & TenantProps) => VNode