Merge remote-tracking branch 'vben/main' into vben-dev
# Conflicts: # .gitignore # .husky/pre-commit # .vscode/extensions.json # .vscode/settings.json # README.ja-JP.md # README.md # README.zh-CN.md # apps/backend-mock/api/auth/codes.ts # apps/backend-mock/api/auth/login.post.ts # apps/backend-mock/api/auth/logout.post.ts # apps/backend-mock/api/auth/refresh.post.ts # apps/backend-mock/api/menu/all.ts # apps/backend-mock/api/status.ts # apps/backend-mock/api/table/list.ts # apps/backend-mock/api/test.get.ts # apps/backend-mock/api/test.post.ts # apps/backend-mock/api/user/info.ts # apps/backend-mock/middleware/1.api.ts # apps/backend-mock/nitro.config.ts # apps/backend-mock/package.json # apps/backend-mock/routes/[...].ts # apps/backend-mock/tsconfig.json # apps/backend-mock/utils/cookie-utils.ts # apps/backend-mock/utils/jwt-utils.ts # apps/backend-mock/utils/mock-data.ts # apps/backend-mock/utils/response.ts # apps/web-antd/.env # apps/web-antd/src/adapter/component/index.ts # apps/web-antd/src/adapter/form.ts # apps/web-antd/src/api/request.ts # apps/web-antd/src/layouts/auth.vue # apps/web-antd/src/layouts/basic.vue # apps/web-antd/src/preferences.ts # apps/web-antd/src/router/guard.ts # apps/web-antd/src/router/routes/modules/demos.ts # apps/web-antd/src/store/auth.ts # apps/web-antd/src/views/demos/antd/index.vue # apps/web-antdv-next/vite.config.ts # apps/web-ele/.env # apps/web-ele/index.html # apps/web-ele/package.json # apps/web-ele/src/adapter/component/index.ts # apps/web-ele/src/adapter/form.ts # apps/web-ele/src/adapter/vxe-table.ts # apps/web-ele/src/api/request.ts # apps/web-ele/src/bootstrap.ts # apps/web-ele/src/layouts/auth.vue # apps/web-ele/src/layouts/basic.vue # apps/web-ele/src/locales/index.ts # apps/web-ele/src/locales/langs/en-US/demos.json # apps/web-ele/src/locales/langs/en-US/page.json # apps/web-ele/src/locales/langs/zh-CN/demos.json # apps/web-ele/src/locales/langs/zh-CN/page.json # apps/web-ele/src/preferences.ts # apps/web-ele/src/router/guard.ts # apps/web-ele/src/router/routes/core.ts # apps/web-ele/src/router/routes/modules/dashboard.ts # apps/web-ele/src/router/routes/modules/demos.ts # apps/web-ele/src/router/routes/modules/vben.ts # apps/web-ele/src/store/auth.ts # apps/web-ele/src/views/_core/authentication/code-login.vue # apps/web-ele/src/views/_core/authentication/forget-password.vue # apps/web-ele/src/views/_core/authentication/register.vue # apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue # apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue # apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue # apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue # apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue # apps/web-ele/src/views/dashboard/analytics/index.vue # apps/web-ele/src/views/demos/element/index.vue # apps/web-ele/src/views/demos/form/basic.vue # apps/web-ele/tsconfig.json # apps/web-ele/tsconfig.node.json # apps/web-naive/.env # apps/web-naive/index.html # apps/web-naive/package.json # apps/web-naive/src/adapter/component/index.ts # apps/web-naive/src/adapter/form.ts # apps/web-naive/src/adapter/vxe-table.ts # apps/web-naive/src/api/request.ts # apps/web-naive/src/bootstrap.ts # apps/web-naive/src/layouts/auth.vue # apps/web-naive/src/layouts/basic.vue # apps/web-naive/src/locales/index.ts # apps/web-naive/src/locales/langs/en-US/demos.json # apps/web-naive/src/locales/langs/en-US/page.json # apps/web-naive/src/locales/langs/zh-CN/demos.json # apps/web-naive/src/locales/langs/zh-CN/page.json # apps/web-naive/src/preferences.ts # apps/web-naive/src/router/guard.ts # apps/web-naive/src/router/routes/core.ts # apps/web-naive/src/router/routes/modules/dashboard.ts # apps/web-naive/src/router/routes/modules/demos.ts # apps/web-naive/src/router/routes/modules/vben.ts # apps/web-naive/src/store/auth.ts # apps/web-naive/src/views/_core/authentication/code-login.vue # apps/web-naive/src/views/_core/authentication/forget-password.vue # apps/web-naive/src/views/_core/authentication/register.vue # apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue # apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue # apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue # apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue # apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue # apps/web-naive/src/views/dashboard/analytics/index.vue # apps/web-naive/src/views/demos/form/basic.vue # apps/web-naive/src/views/demos/naive/index.vue # apps/web-naive/tsconfig.json # apps/web-naive/tsconfig.node.json # apps/web-naive/vite.config.ts # docs/.vitepress/components/demo-preview.vue # docs/.vitepress/components/preview-group.vue # docs/.vitepress/config/en.mts # docs/.vitepress/config/index.mts # docs/.vitepress/config/plugins/demo-preview.ts # docs/.vitepress/config/shared.mts # docs/.vitepress/config/zh.mts # docs/.vitepress/theme/components/site-layout.vue # docs/.vitepress/theme/components/vben-contributors.vue # docs/.vitepress/theme/styles/variables.css # docs/package.json # docs/src/_env/adapter/component.ts # docs/src/_env/adapter/form.ts # docs/src/_env/adapter/vxe-table.ts # docs/src/commercial/community.md # docs/src/components/common-ui/vben-count-to-animator.md # docs/src/components/common-ui/vben-drawer.md # docs/src/components/common-ui/vben-form.md # docs/src/components/common-ui/vben-modal.md # docs/src/components/common-ui/vben-vxe-table.md # docs/src/components/layout-ui/page.md # docs/src/demos/vben-drawer/auto-height/drawer.vue # docs/src/demos/vben-drawer/basic/index.vue # docs/src/demos/vben-drawer/dynamic/index.vue # docs/src/demos/vben-drawer/shared-data/drawer.vue # docs/src/demos/vben-drawer/shared-data/index.vue # docs/src/demos/vben-form/api/index.vue # docs/src/demos/vben-form/basic/index.vue # docs/src/demos/vben-form/custom/index.vue # docs/src/demos/vben-form/dynamic/index.vue # docs/src/demos/vben-form/query/index.vue # docs/src/demos/vben-form/rules/index.vue # docs/src/demos/vben-modal/auto-height/modal.vue # docs/src/demos/vben-modal/basic/index.vue # docs/src/demos/vben-modal/dynamic/index.vue # docs/src/demos/vben-modal/shared-data/index.vue # docs/src/demos/vben-modal/shared-data/modal.vue # docs/src/demos/vben-vxe-table/basic/index.vue # docs/src/demos/vben-vxe-table/custom-cell/index.vue # docs/src/demos/vben-vxe-table/edit-row/index.vue # docs/src/demos/vben-vxe-table/fixed/index.vue # docs/src/demos/vben-vxe-table/form/index.vue # docs/src/demos/vben-vxe-table/remote/index.vue # docs/src/demos/vben-vxe-table/tree/index.vue # docs/src/demos/vben-vxe-table/virtual/index.vue # docs/src/en/guide/essentials/development.md # docs/src/en/guide/essentials/external-module.md # docs/src/en/guide/essentials/route.md # docs/src/en/guide/essentials/server.md # docs/src/en/guide/essentials/settings.md # docs/src/en/guide/in-depth/access.md # docs/src/en/guide/in-depth/loading.md # docs/src/en/guide/in-depth/locale.md # docs/src/en/guide/in-depth/theme.md # docs/src/en/guide/introduction/quick-start.md # docs/src/en/guide/introduction/thin.md # docs/src/en/guide/introduction/vben.md # docs/src/en/guide/other/faq.md # docs/src/en/guide/project/dir.md # docs/src/en/guide/project/standard.md # docs/src/en/guide/project/tailwindcss.md # docs/src/en/index.md # docs/src/friend-links/index.md # docs/src/guide/essentials/build.md # docs/src/guide/essentials/development.md # docs/src/guide/essentials/external-module.md # docs/src/guide/essentials/route.md # docs/src/guide/essentials/server.md # docs/src/guide/essentials/settings.md # docs/src/guide/in-depth/access.md # docs/src/guide/in-depth/check-updates.md # docs/src/guide/in-depth/loading.md # docs/src/guide/in-depth/locale.md # docs/src/guide/in-depth/theme.md # docs/src/guide/introduction/quick-start.md # docs/src/guide/introduction/thin.md # docs/src/guide/introduction/vben.md # docs/src/guide/introduction/why.md # docs/src/guide/other/faq.md # docs/src/guide/project/dir.md # docs/src/guide/project/standard.md # docs/src/guide/project/tailwindcss.md # docs/src/index.md # docs/tsconfig.json # package.json # packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue # packages/constants/src/core.ts # packages/effects/common-ui/src/components/index.ts # packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue # packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue # packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue # packages/effects/layouts/src/authentication/authentication.vue # packages/effects/layouts/src/basic/layout.vue # packages/effects/layouts/src/widgets/notification/notification.vue # packages/effects/layouts/src/widgets/notification/types.ts # packages/icons/src/iconify/index.ts # packages/icons/src/svg/index.ts # packages/stores/src/modules/user.ts # playground/src/adapter/component/index.ts # playground/src/store/auth.ts # pnpm-lock.yaml # vben-admin.code-workspace
This commit is contained in:
李琦
@@ -8,6 +8,7 @@ import {
|
||||
VBEN_GITHUB_URL,
|
||||
VBEN_PREVIEW_URL,
|
||||
} from '@vben/constants';
|
||||
|
||||
import { VbenRenderContent } from '@vben-core/shadcn-ui';
|
||||
|
||||
import { Page } from '../../components';
|
||||
@@ -113,7 +114,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
|
||||
<template>
|
||||
<Page :title="title">
|
||||
<template #description>
|
||||
<p class="text-foreground mt-3 text-sm leading-6">
|
||||
<p class="mt-3 text-sm/6 text-foreground">
|
||||
<a :href="VBEN_GITHUB_URL" class="vben-link" target="_blank">
|
||||
{{ name }}
|
||||
</a>
|
||||
@@ -122,16 +123,16 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
|
||||
</template>
|
||||
<div class="card-box p-5">
|
||||
<div>
|
||||
<h5 class="text-foreground text-lg">基本信息</h5>
|
||||
<h5 class="text-lg text-foreground">基本信息</h5>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
<template v-for="item in vbenDescriptionItems" :key="item.title">
|
||||
<div class="border-border border-t px-4 py-6 sm:col-span-1 sm:px-0">
|
||||
<dt class="text-foreground text-sm font-medium leading-6">
|
||||
<div class="border-t border-border px-4 py-6 sm:col-span-1 sm:px-0">
|
||||
<dt class="text-sm/6 font-medium text-foreground">
|
||||
{{ item.title }}
|
||||
</dt>
|
||||
<dd class="text-foreground mt-1 text-sm leading-6 sm:mt-2">
|
||||
<dd class="mt-1 text-sm/6 text-foreground sm:mt-2">
|
||||
<VbenRenderContent :content="item.content" />
|
||||
</dd>
|
||||
</div>
|
||||
@@ -142,16 +143,16 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
|
||||
|
||||
<div class="card-box mt-6 p-5">
|
||||
<div>
|
||||
<h5 class="text-foreground text-lg">生产环境依赖</h5>
|
||||
<h5 class="text-lg text-foreground">生产环境依赖</h5>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
<template v-for="item in dependenciesItems" :key="item.title">
|
||||
<div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
|
||||
<dt class="text-foreground text-sm">
|
||||
<div class="border-t border-border px-4 py-3 sm:col-span-1 sm:px-0">
|
||||
<dt class="text-sm text-foreground">
|
||||
{{ item.title }}
|
||||
</dt>
|
||||
<dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
|
||||
<dd class="mt-1 text-sm text-foreground/80 sm:mt-2">
|
||||
<VbenRenderContent :content="item.content" />
|
||||
</dd>
|
||||
</div>
|
||||
@@ -161,16 +162,16 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
|
||||
</div>
|
||||
<div class="card-box mt-6 p-5">
|
||||
<div>
|
||||
<h5 class="text-foreground text-lg">开发环境依赖</h5>
|
||||
<h5 class="text-lg text-foreground">开发环境依赖</h5>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
<template v-for="item in devDependenciesItems" :key="item.title">
|
||||
<div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
|
||||
<dt class="text-foreground text-sm">
|
||||
<div class="border-t border-border px-4 py-3 sm:col-span-1 sm:px-0">
|
||||
<dt class="text-sm text-foreground">
|
||||
{{ item.title }}
|
||||
</dt>
|
||||
<dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
|
||||
<dd class="mt-1 text-sm text-foreground/80 sm:mt-2">
|
||||
<VbenRenderContent :content="item.content" />
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="mb-7 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<h2
|
||||
class="text-foreground mb-3 text-3xl font-bold leading-9 tracking-tight lg:text-4xl"
|
||||
class="mb-3 text-3xl/9 font-bold tracking-tight text-foreground lg:text-4xl"
|
||||
>
|
||||
<slot></slot>
|
||||
</h2>
|
||||
|
||||
<p class="text-muted-foreground lg:text-md text-sm">
|
||||
<p class="lg:text-md text-sm text-muted-foreground">
|
||||
<slot name="desc"></slot>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { VbenFormSchema } from '@vben-core/form-ui';
|
||||
|
||||
import { computed, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { useVbenForm } from '@vben-core/form-ui';
|
||||
import { VbenButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
@@ -33,6 +35,10 @@ interface Props {
|
||||
* @zh_CN 按钮文本
|
||||
*/
|
||||
submitButtonText?: string;
|
||||
/**
|
||||
* @zh_CN 是否显示返回按钮
|
||||
*/
|
||||
showBack?: boolean;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
@@ -41,6 +47,7 @@ defineOptions({
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
showBack: true,
|
||||
loginPath: '/auth/login',
|
||||
submitButtonText: '',
|
||||
subTitle: '',
|
||||
@@ -68,10 +75,7 @@ async function handleSubmit() {
|
||||
const { valid } = await formApi.validate();
|
||||
const values = await formApi.getValues();
|
||||
if (valid) {
|
||||
emit('submit', {
|
||||
code: values?.code,
|
||||
phoneNumber: values?.phoneNumber,
|
||||
});
|
||||
emit('submit', values);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -111,7 +115,12 @@ defineExpose({
|
||||
{{ submitButtonText || $t('common.login') }}
|
||||
</slot>
|
||||
</VbenButton>
|
||||
<VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
|
||||
<VbenButton
|
||||
v-if="showBack"
|
||||
class="mt-4 w-full"
|
||||
variant="outline"
|
||||
@click="goToLogin()"
|
||||
>
|
||||
{{ $t('common.back') }}
|
||||
</VbenButton>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { SvgDingDingIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { alert, useVbenModal } from '@vben-core/popup-ui';
|
||||
import { VbenIconButton } from '@vben-core/shadcn-ui';
|
||||
import { loadScript } from '@vben-core/shared/utils';
|
||||
|
||||
interface Props {
|
||||
clientId: string;
|
||||
corpId: string;
|
||||
// 登录回调地址
|
||||
redirectUri?: string;
|
||||
// 是否内嵌二维码登录
|
||||
isQrCode?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
header: false,
|
||||
footer: false,
|
||||
fullscreenButton: false,
|
||||
class: 'size-75.5 dingding-qrcode-login-modal',
|
||||
onOpened() {
|
||||
handleQrCodeLogin();
|
||||
},
|
||||
});
|
||||
|
||||
const getRedirectUri = () => {
|
||||
const { redirectUri } = props;
|
||||
if (redirectUri) {
|
||||
return redirectUri;
|
||||
}
|
||||
return window.location.origin + route.fullPath;
|
||||
};
|
||||
|
||||
/**
|
||||
* 内嵌二维码登录
|
||||
*/
|
||||
const handleQrCodeLogin = async () => {
|
||||
const { clientId, corpId } = props;
|
||||
if (!(window as any).DTFrameLogin) {
|
||||
// 二维码登录 加载资源
|
||||
await loadScript(
|
||||
'https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js',
|
||||
);
|
||||
}
|
||||
(window as any).DTFrameLogin(
|
||||
{
|
||||
id: 'dingding_qrcode_login_element',
|
||||
width: 300,
|
||||
height: 300,
|
||||
},
|
||||
{
|
||||
// 注意：redirect_uri 需为完整URL，扫码后钉钉会带code跳转到这里
|
||||
redirect_uri: encodeURIComponent(getRedirectUri()),
|
||||
client_id: clientId,
|
||||
scope: 'openid corpid',
|
||||
response_type: 'code',
|
||||
state: '1',
|
||||
prompt: 'consent',
|
||||
corpId,
|
||||
},
|
||||
(loginResult: any) => {
|
||||
const { redirectUrl } = loginResult;
|
||||
// 这里可以直接进行重定向
|
||||
window.location.href = redirectUrl;
|
||||
},
|
||||
(errorMsg: string) => {
|
||||
// 这里一般需要展示登录失败的具体原因
|
||||
alert(`Login Error: ${errorMsg}`);
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const handleLogin = () => {
|
||||
const { clientId, corpId, isQrCode } = props;
|
||||
if (isQrCode) {
|
||||
// 内嵌二维码登录
|
||||
modalApi.open();
|
||||
} else {
|
||||
window.location.href = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${encodeURIComponent(getRedirectUri())}&response_type=code&client_id=${clientId}&scope=openid&corpid=${corpId}&prompt=consent`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VbenIconButton
|
||||
@click="handleLogin"
|
||||
:tooltip="$t('authentication.dingdingLogin')"
|
||||
tooltip-side="top"
|
||||
>
|
||||
<SvgDingDingIcon />
|
||||
</VbenIconButton>
|
||||
<Modal>
|
||||
<div id="dingding_qrcode_login_element"></div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.dingding-qrcode-login-modal {
|
||||
.relative {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,6 +5,7 @@ import { computed, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { useVbenForm } from '@vben-core/form-ui';
|
||||
import { VbenButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export { default as AuthenticationCodeLogin } from './code-login.vue';
|
||||
export { default as AuthenticationForgetPassword } from './forget-password.vue';
|
||||
export { default as AuthenticationLogin } from './login.vue';
|
||||
export { default as AuthenticationLoginExpiredModal } from './login-expired-modal.vue';
|
||||
export { default as AuthenticationLogin } from './login.vue';
|
||||
export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
|
||||
export { default as AuthenticationRegister } from './register.vue';
|
||||
export type { AuthenticationProps } from './types';
|
||||
|
||||
@@ -3,6 +3,8 @@ import type { AuthenticationProps } from './types';
|
||||
|
||||
import { computed, watch } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { useVbenModal } from '@vben-core/popup-ui';
|
||||
import { Slot, VbenAvatar } from '@vben-core/shadcn-ui';
|
||||
|
||||
@@ -35,6 +37,16 @@ const getZIndex = computed(() => {
|
||||
return props.zIndex || calcZIndex();
|
||||
});
|
||||
|
||||
/**
|
||||
* 排除ant-message和loading:9999的z-index
|
||||
*/
|
||||
const zIndexExcludeClass = ['ant-message', 'loading'];
|
||||
function isZIndexExcludeClass(element: Element) {
|
||||
return zIndexExcludeClass.some((className) =>
|
||||
element.classList.contains(className),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最大的zIndex值
|
||||
*/
|
||||
@@ -44,7 +56,11 @@ function calcZIndex() {
|
||||
[...elements].forEach((element) => {
|
||||
const style = window.getComputedStyle(element);
|
||||
const zIndex = style.getPropertyValue('z-index');
|
||||
if (zIndex && !Number.isNaN(Number.parseInt(zIndex))) {
|
||||
if (
|
||||
zIndex &&
|
||||
!Number.isNaN(Number.parseInt(zIndex)) &&
|
||||
!isZIndexExcludeClass(element)
|
||||
) {
|
||||
maxZ = Math.max(maxZ, Number.parseInt(zIndex));
|
||||
}
|
||||
});
|
||||
@@ -62,7 +78,7 @@ function calcZIndex() {
|
||||
:fullscreen-button="false"
|
||||
:header="false"
|
||||
:z-index="getZIndex"
|
||||
class="border-none px-10 py-6 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset]"
|
||||
class="border-none px-10 py-6 text-center shadow-xl sm:w-150 sm:rounded-2xl md:h-[unset]"
|
||||
>
|
||||
<VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />
|
||||
<Slot
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { VbenFormSchema } from '@vben-core/form-ui';
|
||||
|
||||
import type { AuthenticationProps } from './types';
|
||||
@@ -8,6 +9,7 @@ import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { useVbenForm } from '@vben-core/form-ui';
|
||||
import { VbenButton, VbenCheckbox } from '@vben-core/shadcn-ui';
|
||||
|
||||
@@ -15,7 +17,7 @@ import Title from './auth-title.vue';
|
||||
import ThirdPartyLogin from './third-party-login.vue';
|
||||
|
||||
interface Props extends AuthenticationProps {
|
||||
formSchema: VbenFormSchema[];
|
||||
formSchema?: VbenFormSchema[];
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
@@ -115,7 +117,7 @@ defineExpose({
|
||||
<div class="flex-center">
|
||||
<VbenCheckbox
|
||||
v-if="showRememberMe"
|
||||
v-model:checked="rememberMe"
|
||||
v-model="rememberMe"
|
||||
name="rememberMe"
|
||||
>
|
||||
{{ $t('authentication.rememberMe') }}
|
||||
@@ -144,7 +146,7 @@ defineExpose({
|
||||
|
||||
<div
|
||||
v-if="showCodeLogin || showQrcodeLogin"
|
||||
class="mb-2 mt-4 flex items-center justify-between"
|
||||
class="mt-4 mb-2 flex items-center justify-between"
|
||||
>
|
||||
<VbenButton
|
||||
v-if="showCodeLogin"
|
||||
|
||||
@@ -3,6 +3,7 @@ import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { VbenButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
import { useQRCode } from '@vueuse/integrations/useQRCode';
|
||||
@@ -34,6 +35,10 @@ interface Props {
|
||||
* @zh_CN 描述
|
||||
*/
|
||||
description?: string;
|
||||
/**
|
||||
* @zh_CN 是否显示返回按钮
|
||||
*/
|
||||
showBack?: boolean;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
@@ -43,6 +48,7 @@ defineOptions({
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
description: '',
|
||||
loading: false,
|
||||
showBack: true,
|
||||
loginPath: '/auth/login',
|
||||
submitButtonText: '',
|
||||
subTitle: '',
|
||||
@@ -78,16 +84,21 @@ function goToLogin() {
|
||||
</template>
|
||||
</Title>
|
||||
|
||||
<div class="flex-col-center mt-6">
|
||||
<div class="mt-6 flex-col-center">
|
||||
<img :src="qrcode" alt="qrcode" class="w-1/2" />
|
||||
<p class="text-muted-foreground mt-4 text-sm">
|
||||
<p class="mt-4 text-sm text-muted-foreground">
|
||||
<slot name="description">
|
||||
{{ description || $t('authentication.qrcodePrompt') }}
|
||||
</slot>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
|
||||
<VbenButton
|
||||
v-if="showBack"
|
||||
class="mt-4 w-full"
|
||||
variant="outline"
|
||||
@click="goToLogin()"
|
||||
>
|
||||
{{ $t('common.back') }}
|
||||
</VbenButton>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { VbenFormSchema } from '@vben-core/form-ui';
|
||||
|
||||
import { computed, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { useVbenForm } from '@vben-core/form-ui';
|
||||
import { VbenButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
import Title from './auth-title.vue';
|
||||
|
||||
interface Props {
|
||||
formSchema: VbenFormSchema[];
|
||||
formSchema?: VbenFormSchema[];
|
||||
/**
|
||||
* @zh_CN 是否处于加载处理状态
|
||||
*/
|
||||
|
||||
@@ -1,36 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import { MdiGithub, MdiGoogle, MdiQqchat, MdiWechat } from '@vben/icons';
|
||||
import { useAppConfig } from '@vben/hooks';
|
||||
import {
|
||||
SvgGithubIcon,
|
||||
SvgGoogleIcon,
|
||||
SvgQQChatIcon,
|
||||
SvgWeChatIcon,
|
||||
} from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { VbenIconButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
import DingdingLogin from './dingding-login.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'ThirdPartyLogin',
|
||||
});
|
||||
|
||||
const {
|
||||
auth: { dingding: dingdingAuthConfig },
|
||||
} = useAppConfig(import.meta.env, import.meta.env.PROD);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full sm:mx-auto md:max-w-md">
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<span class="border-input w-[35%] border-b dark:border-gray-600"></span>
|
||||
<span class="text-muted-foreground text-center text-xs uppercase">
|
||||
<span class="w-[35%] border-b border-input dark:border-gray-600"></span>
|
||||
<span class="text-center text-xs text-muted-foreground uppercase">
|
||||
{{ $t('authentication.thirdPartyLogin') }}
|
||||
</span>
|
||||
<span class="border-input w-[35%] border-b dark:border-gray-600"></span>
|
||||
<span class="w-[35%] border-b border-input dark:border-gray-600"></span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-wrap justify-center">
|
||||
<VbenIconButton class="mb-3">
|
||||
<MdiWechat />
|
||||
<VbenIconButton
|
||||
:tooltip="$t('authentication.wechatLogin')"
|
||||
tooltip-side="top"
|
||||
class="mb-3"
|
||||
>
|
||||
<SvgWeChatIcon />
|
||||
</VbenIconButton>
|
||||
<VbenIconButton class="mb-3">
|
||||
<MdiQqchat />
|
||||
<VbenIconButton
|
||||
:tooltip="$t('authentication.qqLogin')"
|
||||
tooltip-side="top"
|
||||
class="mb-3"
|
||||
>
|
||||
<SvgQQChatIcon />
|
||||
</VbenIconButton>
|
||||
<VbenIconButton class="mb-3">
|
||||
<MdiGithub />
|
||||
<VbenIconButton
|
||||
:tooltip="$t('authentication.githubLogin')"
|
||||
tooltip-side="top"
|
||||
class="mb-3"
|
||||
>
|
||||
<SvgGithubIcon />
|
||||
</VbenIconButton>
|
||||
<VbenIconButton class="mb-3">
|
||||
<MdiGoogle />
|
||||
<VbenIconButton
|
||||
:tooltip="$t('authentication.googleLogin')"
|
||||
tooltip-side="top"
|
||||
class="mb-3"
|
||||
>
|
||||
<SvgGoogleIcon />
|
||||
</VbenIconButton>
|
||||
<DingdingLogin
|
||||
v-if="dingdingAuthConfig"
|
||||
:corp-id="dingdingAuthConfig.corpId"
|
||||
:client-id="dingdingAuthConfig.clientId"
|
||||
class="mb-3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { computed } from 'vue';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Props {
|
||||
tabs: TabOption[];
|
||||
tabs?: TabOption[];
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
@@ -23,7 +23,7 @@ const defaultValue = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card-box w-full px-4 pb-5 pt-3">
|
||||
<div class="card-box w-full px-4 pt-3 pb-5">
|
||||
<Tabs :default-value="defaultValue">
|
||||
<TabsList>
|
||||
<template v-for="tab in tabs" :key="tab.label">
|
||||
|
||||
@@ -14,8 +14,8 @@ import {
|
||||
import { desensitize } from '../../../../../../../apps/web-antd/src/util/tool';
|
||||
|
||||
interface Props {
|
||||
items: AnalysisOverviewItem[];
|
||||
myCard: any;
|
||||
items?: AnalysisOverviewItem[];
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
@@ -62,7 +62,7 @@ withDefaults(defineProps<Props>(), {
|
||||
class="text-xl"
|
||||
prefix=""
|
||||
/>
|
||||
<VbenIcon :icon="item.icon" class="size-8 flex-shrink-0" />
|
||||
<VbenIcon :icon="item.icon" class="size-8 shrink-0" />
|
||||
</CardContent>
|
||||
<CardFooter class="justify-between">
|
||||
<span>{{ item.totalTitle }}</span>
|
||||
|
||||
@@ -2,13 +2,15 @@ import type { Component } from 'vue';
|
||||
|
||||
interface AnalysisOverviewItem {
|
||||
icon: Component | string;
|
||||
title: string;
|
||||
title?: string;
|
||||
totalTitle: string;
|
||||
totalValue: number;
|
||||
value: number;
|
||||
value?: number;
|
||||
}
|
||||
|
||||
interface WorkbenchProjectItem {
|
||||
/** 临时字段 */
|
||||
[key: string]: any;
|
||||
color?: string;
|
||||
content: string;
|
||||
date: string;
|
||||
|
||||
@@ -15,32 +15,34 @@ withDefaults(defineProps<Props>(), {
|
||||
</script>
|
||||
<template>
|
||||
<div class="card-box p-4 py-6 lg:flex">
|
||||
<VbenAvatar :src="avatar" class="size-20" />
|
||||
<VbenAvatar v-if="avatar" :src="avatar" class="size-20" />
|
||||
<div
|
||||
v-if="$slots.title || $slots.description"
|
||||
class="flex flex-col justify-center md:ml-6 md:mt-0"
|
||||
class="flex flex-col justify-center md:mt-0 md:ml-6"
|
||||
>
|
||||
<h1 v-if="$slots.title" class="text-md font-semibold md:text-xl">
|
||||
<slot name="title"></slot>
|
||||
</h1>
|
||||
<span v-if="$slots.description" class="text-foreground/80 mt-1">
|
||||
<span v-if="$slots.description" class="mt-1 text-foreground/80">
|
||||
<slot name="description"></slot>
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="mt-4 flex flex-1 justify-end md:mt-0">-->
|
||||
<!-- <div class="flex flex-col justify-center text-right">-->
|
||||
<!-- <span class="text-foreground/80"> 待办 </span>-->
|
||||
<!-- <span class="text-2xl">2/10</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <slot name="actions">-->
|
||||
<!-- <div class="flex flex-col justify-center text-right">-->
|
||||
<!-- <span class="text-foreground/80"> 待办 </span>-->
|
||||
<!-- <span class="text-2xl">2/10</span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="mx-12 flex flex-col justify-center text-right md:mx-16">-->
|
||||
<!-- <span class="text-foreground/80"> 项目 </span>-->
|
||||
<!-- <span class="text-2xl">8</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="mr-4 flex flex-col justify-center text-right md:mr-10">-->
|
||||
<!-- <span class="text-foreground/80"> 团队 </span>-->
|
||||
<!-- <span class="text-2xl">300</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="mx-12 flex flex-col justify-center text-right md:mx-16">-->
|
||||
<!-- <span class="text-foreground/80"> 项目 </span>-->
|
||||
<!-- <span class="text-2xl">8</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="mr-4 flex flex-col justify-center text-right md:mr-10">-->
|
||||
<!-- <span class="text-foreground/80"> 团队 </span>-->
|
||||
<!-- <span class="text-2xl">300</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </slot>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
} from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Props {
|
||||
items: WorkbenchProjectItem[];
|
||||
items?: WorkbenchProjectItem[];
|
||||
title: string;
|
||||
}
|
||||
|
||||
@@ -37,8 +37,10 @@ defineEmits(['click']);
|
||||
'border-r-0': index % 3 === 2,
|
||||
'border-b-0': index < 3,
|
||||
'pb-4': index > 2,
|
||||
'rounded-bl-xl': index >= items.length - 3 && index % 3 === 0,
|
||||
'rounded-br-xl': index === items.length - 1 && index % 3 === 2,
|
||||
}"
|
||||
class="border-border group w-full cursor-pointer border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
|
||||
class="border-border group w-full cursor-pointer border-b border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
|
||||
@click="$emit('click', item)"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
@@ -46,16 +48,25 @@ defineEmits(['click']);
|
||||
:color="item.color"
|
||||
:icon="item.icon"
|
||||
class="size-8 transition-all duration-300 group-hover:scale-110"
|
||||
@click="$emit('click', item)"
|
||||
/>
|
||||
<span class="ml-4 text-lg font-medium">{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="text-foreground/80 mt-4 flex h-10">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div class="text-foreground/80 flex justify-between">
|
||||
<span>{{ item.group }}</span>
|
||||
<span>{{ item.date }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域支持插槽自定义 -->
|
||||
<slot name="content" :item="item" :index="index">
|
||||
<div class="text-foreground/80 mt-4 flex h-10">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
<!-- 底部信息区域支持插槽自定义 -->
|
||||
<slot name="footer" :item="item" :index="index">
|
||||
<div class="text-foreground/80 flex justify-between">
|
||||
<span>{{ item.group }}</span>
|
||||
<span>{{ item.date }}</span>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
</CardContent>
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
} from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Props {
|
||||
items: WorkbenchQuickNavItem[];
|
||||
items?: WorkbenchQuickNavItem[];
|
||||
title: string;
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ defineEmits(['click']);
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader class="py-4">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-lg">{{ title }}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="flex flex-wrap p-0">
|
||||
@@ -35,10 +35,12 @@ defineEmits(['click']);
|
||||
<div
|
||||
:class="{
|
||||
'border-r-0': index % 3 === 2,
|
||||
'pb-4': index > 2,
|
||||
'border-b-0': index < 3,
|
||||
'pb-4': index > 2,
|
||||
'rounded-bl-xl': index === items.length - 3,
|
||||
'rounded-br-xl': index === items.length - 1,
|
||||
}"
|
||||
class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
|
||||
class="group flex-col-center w-1/3 cursor-pointer border-t border-r border-border py-8 hover:shadow-xl"
|
||||
@click="$emit('click', item)"
|
||||
>
|
||||
<VbenIcon
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
} from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Props {
|
||||
items: WorkbenchTodoItem[];
|
||||
items?: WorkbenchTodoItem[];
|
||||
title: string;
|
||||
}
|
||||
|
||||
@@ -25,34 +25,34 @@ withDefaults(defineProps<Props>(), {
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader class="py-4">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-lg">{{ title }}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="flex flex-wrap p-5 pt-0">
|
||||
<ul class="divide-border w-full divide-y" role="list">
|
||||
<ul class="w-full divide-y divide-border" role="list">
|
||||
<li
|
||||
v-for="item in items"
|
||||
:key="item.title"
|
||||
:class="{
|
||||
'select-none line-through opacity-60': item.completed,
|
||||
'line-through opacity-60 select-none': item.completed,
|
||||
}"
|
||||
class="flex cursor-pointer justify-between gap-x-6 py-5"
|
||||
>
|
||||
<div class="flex min-w-0 items-center gap-x-4">
|
||||
<VbenCheckbox v-model:checked="item.completed" name="completed" />
|
||||
<VbenCheckbox v-model="item.completed" name="completed" />
|
||||
<div class="min-w-0 flex-auto">
|
||||
<p class="text-foreground text-sm font-semibold leading-6">
|
||||
<p class="text-sm/6 font-semibold text-foreground">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<p
|
||||
class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
|
||||
class="mt-1 truncate text-xs/5 text-foreground/80 *:text-primary"
|
||||
v-html="item.content"
|
||||
></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
|
||||
<span class="text-foreground/80 mt-6 text-xs leading-6">
|
||||
<span class="mt-6 text-xs/6 text-foreground/80">
|
||||
{{ item.date }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
} from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Props {
|
||||
items: WorkbenchTrendItem[];
|
||||
items?: WorkbenchTrendItem[];
|
||||
title: string;
|
||||
}
|
||||
|
||||
@@ -25,11 +25,11 @@ withDefaults(defineProps<Props>(), {
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader class="py-4">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-lg">{{ title }}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="flex flex-wrap p-5 pt-0">
|
||||
<ul class="divide-border w-full divide-y" role="list">
|
||||
<ul class="w-full divide-y divide-border" role="list">
|
||||
<li
|
||||
v-for="item in items"
|
||||
:key="item.title"
|
||||
@@ -42,18 +42,18 @@ withDefaults(defineProps<Props>(), {
|
||||
class="size-10 flex-none rounded-full"
|
||||
/>
|
||||
<div class="min-w-0 flex-auto">
|
||||
<p class="text-foreground text-sm font-semibold leading-6">
|
||||
<p class="text-sm/6 font-semibold text-foreground">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<p
|
||||
class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
|
||||
class="mt-1 truncate text-xs/5 text-foreground/80 *:text-primary"
|
||||
v-html="item.content"
|
||||
></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
|
||||
<span class="text-foreground/80 mt-6 text-xs leading-6">
|
||||
<span class="mt-6 text-xs/6 text-foreground/80">
|
||||
{{ item.date }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router';
|
||||
|
||||
import { ArrowLeft, RotateCw } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { VbenButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Props extends FallbackProps {}
|
||||
@@ -127,7 +128,7 @@ function refresh() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex size-full flex-col items-center justify-center duration-300">
|
||||
<div class="flex-col-center size-full duration-300">
|
||||
<img v-if="image" :src="image" class="md:1/3 w-1/2 lg:w-1/4" />
|
||||
<component
|
||||
:is="fallbackIcon"
|
||||
@@ -138,14 +139,14 @@ function refresh() {
|
||||
<slot v-if="$slots.title" name="title"></slot>
|
||||
<p
|
||||
v-else-if="titleText"
|
||||
class="text-foreground mt-8 text-2xl md:text-3xl lg:text-4xl"
|
||||
class="mt-8 text-2xl text-foreground md:text-3xl lg:text-4xl"
|
||||
>
|
||||
{{ titleText }}
|
||||
</p>
|
||||
<slot v-if="$slots.describe" name="describe"></slot>
|
||||
<p
|
||||
v-else-if="descText"
|
||||
class="text-muted-foreground md:text-md my-4 lg:text-lg"
|
||||
class="md:text-md my-4 text-muted-foreground lg:text-lg"
|
||||
>
|
||||
{{ descText }}
|
||||
</p>
|
||||
|
||||
@@ -2,3 +2,4 @@ export * from './about';
|
||||
export * from './authentication';
|
||||
export * from './dashboard';
|
||||
export * from './fallback';
|
||||
export * from './profile';
|
||||
|
||||
58
packages/effects/common-ui/src/ui/profile/base-setting.vue
Normal file
58
packages/effects/common-ui/src/ui/profile/base-setting.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { VbenFormSchema } from '@vben-core/form-ui';
|
||||
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { useVbenForm } from '@vben-core/form-ui';
|
||||
import { VbenButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Props {
|
||||
formSchema?: VbenFormSchema[];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
formSchema: () => [],
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [Recordable<any>];
|
||||
}>();
|
||||
|
||||
const [Form, formApi] = useVbenForm(
|
||||
reactive({
|
||||
commonConfig: {
|
||||
// 所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: computed(() => props.formSchema),
|
||||
showDefaultActions: false,
|
||||
}),
|
||||
);
|
||||
|
||||
async function handleSubmit() {
|
||||
const { valid } = await formApi.validate();
|
||||
const values = await formApi.getValues();
|
||||
if (valid) {
|
||||
emit('submit', values);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getFormApi: () => formApi,
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div @keydown.enter.prevent="handleSubmit">
|
||||
<Form />
|
||||
<VbenButton type="submit" class="mt-4" @click="handleSubmit">
|
||||
{{ $t('profile.updateBasicProfile') }}
|
||||
</VbenButton>
|
||||
</div>
|
||||
</template>
|
||||
6
packages/effects/common-ui/src/ui/profile/index.ts
Normal file
6
packages/effects/common-ui/src/ui/profile/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export { default as ProfileBaseSetting } from './base-setting.vue';
|
||||
export { default as ProfileNotificationSetting } from './notification-setting.vue';
|
||||
export { default as ProfilePasswordSetting } from './password-setting.vue';
|
||||
export { default as Profile } from './profile.vue';
|
||||
export { default as ProfileSecuritySetting } from './security-setting.vue';
|
||||
export type * from './types';
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { SettingProps } from './types';
|
||||
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
Switch,
|
||||
} from '@vben-core/shadcn-ui';
|
||||
|
||||
withDefaults(defineProps<SettingProps>(), {
|
||||
formSchema: () => [],
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [Recordable<any>];
|
||||
}>();
|
||||
|
||||
function handleChange(fieldName: string, value: boolean) {
|
||||
emit('change', { fieldName, value });
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<form class="space-y-8">
|
||||
<div class="space-y-4">
|
||||
<template v-for="item in formSchema" :key="item.fieldName">
|
||||
<FormField type="checkbox" :name="item.fieldName">
|
||||
<FormItem
|
||||
class="flex flex-row items-center justify-between rounded-lg border p-4"
|
||||
>
|
||||
<div class="space-y-0.5">
|
||||
<FormLabel class="text-base"> {{ item.label }} </FormLabel>
|
||||
<FormDescription>
|
||||
{{ item.description }}
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
:model-value="item.value"
|
||||
@update:model-value="handleChange(item.fieldName, $event)"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { VbenFormSchema } from '@vben-core/form-ui';
|
||||
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { useVbenForm } from '@vben-core/form-ui';
|
||||
import { VbenButton } from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Props {
|
||||
formSchema?: VbenFormSchema[];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
formSchema: () => [],
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [Recordable<any>];
|
||||
}>();
|
||||
|
||||
const [Form, formApi] = useVbenForm(
|
||||
reactive({
|
||||
commonConfig: {
|
||||
labelWidth: 130,
|
||||
// 所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: computed(() => props.formSchema),
|
||||
showDefaultActions: false,
|
||||
}),
|
||||
);
|
||||
|
||||
async function handleSubmit() {
|
||||
const { valid } = await formApi.validate();
|
||||
const values = await formApi.getValues();
|
||||
if (valid) {
|
||||
emit('submit', values);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getFormApi: () => formApi,
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<Form />
|
||||
<VbenButton type="submit" class="mt-4" @click="handleSubmit">
|
||||
{{ $t('profile.updatePassword') }}
|
||||
</VbenButton>
|
||||
</div>
|
||||
</template>
|
||||
62
packages/effects/common-ui/src/ui/profile/profile.vue
Normal file
62
packages/effects/common-ui/src/ui/profile/profile.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import type { Props } from './types';
|
||||
|
||||
import { preferences } from '@vben-core/preferences';
|
||||
import {
|
||||
Card,
|
||||
Separator,
|
||||
Tabs,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
VbenAvatar,
|
||||
} from '@vben-core/shadcn-ui';
|
||||
|
||||
import { Page } from '../../components';
|
||||
|
||||
defineOptions({
|
||||
name: 'ProfileUI',
|
||||
});
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
title: '关于项目',
|
||||
tabs: () => [],
|
||||
});
|
||||
|
||||
const tabsValue = defineModel<string>('modelValue');
|
||||
</script>
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<div class="flex size-full">
|
||||
<Card class="w-1/6 flex-none">
|
||||
<div class="mt-4 flex-col-center h-40 gap-4">
|
||||
<VbenAvatar
|
||||
:src="userInfo?.avatar ?? preferences.app.defaultAvatar"
|
||||
class="size-20"
|
||||
/>
|
||||
<span class="text-lg font-semibold">
|
||||
{{ userInfo?.realName ?? '' }}
|
||||
</span>
|
||||
<span class="text-sm text-foreground/80">
|
||||
{{ userInfo?.username ?? '' }}
|
||||
</span>
|
||||
</div>
|
||||
<Separator class="my-4" />
|
||||
<Tabs v-model="tabsValue" orientation="vertical" class="m-4">
|
||||
<TabsList class="grid w-full grid-cols-1 bg-card">
|
||||
<TabsTrigger
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
:value="tab.value"
|
||||
class="h-12 justify-start data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</Card>
|
||||
<Card class="ml-4 w-5/6 flex-auto p-8">
|
||||
<slot name="content"></slot>
|
||||
</Card>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { SettingProps } from './types';
|
||||
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
Switch,
|
||||
} from '@vben-core/shadcn-ui';
|
||||
|
||||
withDefaults(defineProps<SettingProps>(), {
|
||||
formSchema: () => [],
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [Recordable<any>];
|
||||
}>();
|
||||
|
||||
function handleChange(fieldName: string, value: boolean) {
|
||||
emit('change', { fieldName, value });
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<form class="space-y-8">
|
||||
<div class="space-y-4">
|
||||
<template v-for="item in formSchema" :key="item.fieldName">
|
||||
<FormField type="checkbox" :name="item.fieldName">
|
||||
<FormItem
|
||||
class="flex flex-row items-center justify-between rounded-lg border p-4"
|
||||
>
|
||||
<div class="space-y-0.5">
|
||||
<FormLabel class="text-base"> {{ item.label }} </FormLabel>
|
||||
<FormDescription>
|
||||
{{ item.description }}
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
:model-value="item.value"
|
||||
@update:model-value="handleChange(item.fieldName, $event)"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</template>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
21
packages/effects/common-ui/src/ui/profile/types.ts
Normal file
21
packages/effects/common-ui/src/ui/profile/types.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import type { BasicUserInfo } from '@vben/types';
|
||||
|
||||
export interface Props {
|
||||
title?: string;
|
||||
userInfo: BasicUserInfo | null;
|
||||
tabs: {
|
||||
label: string;
|
||||
value: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export interface FormSchemaItem {
|
||||
description: string;
|
||||
fieldName: string;
|
||||
label: string;
|
||||
value: boolean;
|
||||
}
|
||||
|
||||
export interface SettingProps {
|
||||
formSchema: FormSchemaItem[];
|
||||
}
|
||||
Reference in New Issue
Block a user