diff --git a/docs/.vitepress/components/demo-preview.vue b/docs/.vitepress/components/demo-preview.vue new file mode 100644 index 00000000..2aba9832 --- /dev/null +++ b/docs/.vitepress/components/demo-preview.vue @@ -0,0 +1,43 @@ + + + diff --git a/docs/.vitepress/components/index.ts b/docs/.vitepress/components/index.ts new file mode 100644 index 00000000..9430871e --- /dev/null +++ b/docs/.vitepress/components/index.ts @@ -0,0 +1 @@ +export { default as DemoPreview } from './demo-preview.vue'; diff --git a/docs/.vitepress/components/preview-group.vue b/docs/.vitepress/components/preview-group.vue new file mode 100644 index 00000000..aad02b85 --- /dev/null +++ b/docs/.vitepress/components/preview-group.vue @@ -0,0 +1,108 @@ + + + diff --git a/docs/.vitepress/config/en.mts b/docs/.vitepress/config/en.mts index 72f40958..811d432e 100644 --- a/docs/.vitepress/config/en.mts +++ b/docs/.vitepress/config/en.mts @@ -13,7 +13,7 @@ export const en = defineConfig({ prev: 'Previous Page', }, editLink: { - pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path', + pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/src/:path', text: 'Edit this page on GitHub', }, footer: { @@ -203,7 +203,7 @@ function nav(): DefaultTheme.NavItem[] { }, { link: '/commercial/technical-support', - text: '🦄 Technical Support', + text: '🦄 Tech Support', }, { link: '/sponsor/personal', diff --git a/docs/.vitepress/config/index.mts b/docs/.vitepress/config/index.mts index 8365bc31..6b8cb81d 100644 --- a/docs/.vitepress/config/index.mts +++ b/docs/.vitepress/config/index.mts @@ -2,12 +2,12 @@ import { withPwa } from '@vite-pwa/vitepress'; import { defineConfigWithTheme } from 'vitepress'; import { en } from './en.mts'; -import { shard } from './shard.mts'; +import { shared } from './shared.mts'; import { zh } from './zh.mts'; export default withPwa( defineConfigWithTheme({ - ...shard, + ...shared, locales: { en: { label: 'English', diff --git a/docs/.vitepress/config/plugins/demo-preview.ts b/docs/.vitepress/config/plugins/demo-preview.ts new file mode 100644 index 00000000..46c35a96 --- /dev/null +++ b/docs/.vitepress/config/plugins/demo-preview.ts @@ -0,0 +1,135 @@ +import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'; + +import crypto from 'node:crypto'; +import { readdirSync } from 'node:fs'; +import { join } from 'node:path'; + +export const rawPathRegexp = + // eslint-disable-next-line regexp/no-super-linear-backtracking, regexp/strict + /^(.+?(?:\.([\da-z]+))?)(#[\w-]+)?(?: ?{(\d+(?:[,-]\d+)*)? ?(\S+)?})? ?(?:\[(.+)])?$/; + +function rawPathToToken(rawPath: string) { + const [ + filepath = '', + extension = '', + region = '', + lines = '', + lang = '', + rawTitle = '', + ] = (rawPathRegexp.exec(rawPath) || []).slice(1); + + const title = rawTitle || filepath.split('/').pop() || ''; + + return { extension, filepath, lang, lines, region, title }; +} + +export const demoPreviewPlugin = (md: MarkdownRenderer) => { + md.core.ruler.after('inline', 'demo-preview', (state) => { + const insertComponentImport = (importString: string) => { + const index = state.tokens.findIndex( + (i) => i.type === 'html_block' && i.content.match(/\n`; + state.tokens.splice(0, 0, importComponent); + } else { + if (state.tokens[index]) { + const content = state.tokens[index].content; + state.tokens[index].content = content.replace( + '', + `${importString}\n`, + ); + } + } + }; + // Define the regular expression to match the desired pattern + const regex = /]*\sdir="([^"]*)"/g; + // Iterate through the Markdown content and replace the pattern + state.src = state.src.replaceAll(regex, (_match, dir) => { + const componentDir = join(process.cwd(), 'src', dir); + + let childFiles: string[] = []; + let dirExists = true; + + try { + childFiles = + readdirSync(componentDir, { + encoding: 'utf8', + recursive: false, + withFileTypes: false, + }) || []; + } catch { + dirExists = false; + } + + if (!dirExists) { + return ''; + } + + const uniqueWord = generateContentHash(componentDir); + + const ComponentName = `DemoComponent_${uniqueWord}`; + insertComponentImport( + `import ${ComponentName} from '${componentDir}/index.vue'`, + ); + const { path: _path } = state.env as MarkdownEnv; + + const index = state.tokens.findIndex((i) => i.content.match(regex)); + + if (!state.tokens[index]) { + return ''; + } + + state.tokens[index].content = + `<${ComponentName}/> + `; + + const _dummyToken = new state.Token('', '', 0); + const tokenArray: Array = []; + childFiles.forEach((filename) => { + // const slotName = filename.replace(extname(filename), ''); + + const templateStart = new state.Token('html_inline', '', 0); + templateStart.content = `'; + tokenArray.push(templateEnd); + }); + const endTag = new state.Token('html_inline', '', 0); + endTag.content = ''; + tokenArray.push(endTag); + + state.tokens.splice(index + 1, 0, ...tokenArray); + + // console.log( + // state.md.renderer.render(state.tokens, state?.options ?? [], state.env), + // ); + return ''; + }); + }); +}; + +function generateContentHash(input: string, length: number = 10): string { + // 使用 SHA-256 生成哈希值 + const hash = crypto.createHash('sha256').update(input).digest('hex'); + + // 将哈希值转换为 Base36 编码，并取指定长度的字符作为结果 + return Number.parseInt(hash, 16).toString(36).slice(0, length); +} diff --git a/docs/.vitepress/config/shard.mts b/docs/.vitepress/config/shared.mts similarity index 76% rename from docs/.vitepress/config/shard.mts rename to docs/.vitepress/config/shared.mts index 1d9748ee..b7059f32 100644 --- a/docs/.vitepress/config/shard.mts +++ b/docs/.vitepress/config/shared.mts @@ -1,4 +1,5 @@ import type { PwaOptions } from '@vite-pwa/vitepress'; +import type { HeadConfig } from 'vitepress'; import { resolve } from 'node:path'; @@ -6,12 +7,20 @@ import { GitChangelog, GitChangelogMarkdownSection, } from '@nolebase/vitepress-plugin-git-changelog/vite'; -import { defineConfig, type HeadConfig } from 'vitepress'; +import tailwind from 'tailwindcss'; +import { defineConfig, postcssIsolateStyles } from 'vitepress'; +import { demoPreviewPlugin } from './plugins/demo-preview'; import { search as zhSearch } from './zh.mts'; -export const shard = defineConfig({ +export const shared = defineConfig({ + appearance: 'dark', head: head(), + markdown: { + preConfig(md) { + md.use(demoPreviewPlugin); + }, + }, pwa: pwa(), srcDir: 'src', themeConfig: { @@ -36,11 +45,34 @@ export const shard = defineConfig({ chunkSizeWarningLimit: Infinity, minify: 'terser', }, + css: { + postcss: { + plugins: [ + tailwind(), + postcssIsolateStyles({ includeFiles: [/vp-doc\.css/] }), + ], + }, + }, json: { stringify: true, }, plugins: [ GitChangelog({ + mapAuthors: [ + { + mapByNameAliases: ['Vben'], + name: 'vben', + username: 'anncwb', + }, + { + name: 'vince', + username: 'vince292007', + }, + { + name: 'Li Kui', + username: 'likui628', + }, + ], repoURL: () => 'https://github.com/vbenjs/vue-vben-admin', }), GitChangelogMarkdownSection(), diff --git a/docs/.vitepress/config/zh.mts b/docs/.vitepress/config/zh.mts index babbd70d..7e334ee1 100644 --- a/docs/.vitepress/config/zh.mts +++ b/docs/.vitepress/config/zh.mts @@ -13,7 +13,8 @@ export const zh = defineConfig({ prev: '上一页', }, editLink: { - pattern: 'https://github.com/vbenjs/vue-vben-admin/edit/main/docs/:path', + pattern: + 'https://github.com/vbenjs/vue-vben-admin/edit/main/docs/src/:path', text: '在 GitHub 上编辑此页面', }, footer: { @@ -38,6 +39,7 @@ export const zh = defineConfig({ sidebar: { '/commercial/': { base: '/commercial/', items: sidebarCommercial() }, + '/components/': { base: '/components/', items: sidebarComponents() }, '/guide/': { base: '/guide/', items: sidebarGuide() }, }, sidebarMenuLabel: '菜单', @@ -60,6 +62,11 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] { }, { link: 'introduction/quick-start', text: '快速开始' }, { link: 'introduction/thin', text: '精简版本' }, + { + base: '/', + link: 'components/introduction', + text: '组件文档', + }, ], }, { @@ -117,7 +124,7 @@ function sidebarCommercial(): DefaultTheme.SidebarItem[] { return [ { link: 'community', - text: '社区交流', + text: '社区', }, { link: 'technical-support', @@ -130,6 +137,30 @@ function sidebarCommercial(): DefaultTheme.SidebarItem[] { ]; } +function sidebarComponents(): DefaultTheme.SidebarItem[] { + return [ + { + text: '组件', + items: [ + { + link: 'introduction', + text: '介绍', + }, + ], + }, + { + collapsed: false, + text: '通用组件', + items: [ + { + link: 'common-ui/vben-modal', + text: 'Modal 弹窗', + }, + ], + }, + ]; +} + function nav(): DefaultTheme.NavItem[] { return [ { @@ -138,28 +169,10 @@ function nav(): DefaultTheme.NavItem[] { { link: '/guide/introduction/vben', text: '指南', - // items: [ - // { - // link: '/guide/introduction/vben', - // text: '简介', - // }, - // { - // link: '/guide/essentials/concept', - // text: '基础', - // }, - // { - // link: '/guide/in-depth/layout', - // text: '深入', - // }, - // { - // link: '/guide/project/standard', - // text: '工程', - // }, - // { - // link: '/guide/other/project-update', - // text: '其他', - // }, - // ], + }, + { + link: '/components/introduction', + text: '组件', }, { text: '历史版本', @@ -234,7 +247,7 @@ function nav(): DefaultTheme.NavItem[] { }, { link: '/commercial/community', - text: '👨‍👦‍👦 社区交流', + text: '👨‍👦‍👦 社区', // items: [ // { // link: 'https://qun.qq.com/qqweb/qunpro/share?_wv=3&_wwv=128&appChannel=share&inviteCode=22ySzj7pKiw&businessType=9&from=246610&biz=ka&mainSourceId=share&subSourceId=others&jumpsource=shorturl#/pc', diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 862f06e9..e1888aa9 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,9 +1,10 @@ // https://vitepress.dev/guide/custom-theme -import type { Theme } from 'vitepress'; +import type { EnhanceAppContext, Theme } from 'vitepress'; import { NolebaseGitChangelogPlugin } from '@nolebase/vitepress-plugin-git-changelog/client'; import DefaultTheme from 'vitepress/theme'; +import { DemoPreview } from '../components'; import SiteLayout from './components/site-layout.vue'; import VbenContributors from './components/vben-contributors.vue'; import { initHmPlugin } from './plugins/hm'; @@ -13,9 +14,10 @@ import './styles'; import '@nolebase/vitepress-plugin-git-changelog/client/style.css'; export default { - enhanceApp({ app }) { - // ... + enhanceApp(ctx: EnhanceAppContext) { + const { app } = ctx; app.component('VbenContributors', VbenContributors); + app.component('DemoPreview', DemoPreview); app.use(NolebaseGitChangelogPlugin); // 百度统计 initHmPlugin(); diff --git a/docs/.vitepress/theme/styles/index.ts b/docs/.vitepress/theme/styles/index.ts index 3cc1668c..1ee8ccc4 100644 --- a/docs/.vitepress/theme/styles/index.ts +++ b/docs/.vitepress/theme/styles/index.ts @@ -1,2 +1,3 @@ import './variables.css'; import './base.css'; +import '@vben/styles'; diff --git a/docs/package.json b/docs/package.json index b61a19c3..e265455f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -8,10 +8,18 @@ "docs:preview": "vitepress preview" }, "dependencies": { - "medium-zoom": "^1.1.0" + "@vben-core/shadcn-ui": "workspace:*", + "@vben/common-ui": "workspace:*", + "@vben/styles": "workspace:*", + "@vueuse/core": "^11.0.3", + "lucide-vue-next": "^0.436.0", + "markdown-it": "^14.1.0", + "medium-zoom": "^1.1.0", + "radix-vue": "^1.9.5" }, "devDependencies": { "@nolebase/vitepress-plugin-git-changelog": "^2.4.0", + "@types/markdown-it": "^14.1.2", "@vite-pwa/vitepress": "^0.5.0", "vitepress": "^1.3.4", "vue": "^3.4.38" diff --git a/docs/src/components/common-ui/vben-modal.md b/docs/src/components/common-ui/vben-modal.md new file mode 100644 index 00000000..f1d6c157 --- /dev/null +++ b/docs/src/components/common-ui/vben-modal.md @@ -0,0 +1,45 @@ +--- +outline: deep +--- + +# vben-modal + +::: tip + +文档还在完善中，敬请期待。 + +::: + +框架提供的模态框组件，支持`拖拽`、`全屏`、`自定义`等功能。 + +## 基础用法 + +使用 `useVbenModal` 创建最基于的模态框。 + + + +## 组件抽离 + +modal 内的内容一般业务中，会比较复杂，所以我们可以将 modal 内的内容抽离出来。 + + + +## API + +### 属性 + +| 属性名 | 描述 | 类型 | 默认值 | +| ------ | ----- | -------- | ------ | +| title | 标题. | `string` | — | + +### 事件 + +| 事件名 | 描述 | 类型 | +| ------ | ---- | ---- | +| TODO | TODO | TODO | + +### 插槽 + +| 插槽名 | 描述 | +| ------- | ---- | +| default | xx. | diff --git a/docs/src/components/introduction.md b/docs/src/components/introduction.md new file mode 100644 index 00000000..8fc96205 --- /dev/null +++ b/docs/src/components/introduction.md @@ -0,0 +1,11 @@ +# 介绍 + +::: tip README + +该文档介绍的是框架组件的使用方法、属性、事件等。如果你觉得组件封装的不好，或者不符合你的需求，你可以直接使用原生的组件，或者自己封装一个组件，不需要拘泥于框架提供的组件。我们只是提供了一些常用的组件，方便你快速开发。是否使用，取决于你的需求。 + +::: + +## 通用组件 + +通用组件是一些常用的组件，比如弹窗、抽屉、表单等。大部分基于 `Tailwind CSS` 实现，可适用于不同 UI 组件库的应用。 diff --git a/docs/src/demos/vben-modal/basic/index.vue b/docs/src/demos/vben-modal/basic/index.vue new file mode 100644 index 00000000..038d6268 --- /dev/null +++ b/docs/src/demos/vben-modal/basic/index.vue @@ -0,0 +1,11 @@ + + diff --git a/docs/src/demos/vben-modal/extra/index.vue b/docs/src/demos/vben-modal/extra/index.vue new file mode 100644 index 00000000..1fa74cd6 --- /dev/null +++ b/docs/src/demos/vben-modal/extra/index.vue @@ -0,0 +1,22 @@ + + + diff --git a/docs/src/demos/vben-modal/extra/modal.vue b/docs/src/demos/vben-modal/extra/modal.vue new file mode 100644 index 00000000..68ceb5ee --- /dev/null +++ b/docs/src/demos/vben-modal/extra/modal.vue @@ -0,0 +1,8 @@ + + diff --git a/docs/src/guide/in-depth/loading.md b/docs/src/guide/in-depth/loading.md index adc5fd99..ff89dcb8 100644 --- a/docs/src/guide/in-depth/loading.md +++ b/docs/src/guide/in-depth/loading.md @@ -42,3 +42,5 @@ VITE_INJECT_APP_LOADING=false
<%= VITE_APP_TITLE %>
``` + +::: diff --git a/docs/tailwind.config.mjs b/docs/tailwind.config.mjs new file mode 100644 index 00000000..9dbc8c32 --- /dev/null +++ b/docs/tailwind.config.mjs @@ -0,0 +1,11 @@ +import tailwindcssConfig from '@vben/tailwind-config'; + +export default { + ...tailwindcssConfig, + content: [ + ...tailwindcssConfig.content, + '.vitepress/**/*.{js,mts,ts,vue}', + 'src/demos/**/*.{js,mts,ts,vue}', + 'src/**/*.md', + ], +}; diff --git a/docs/tsconfig.json b/docs/tsconfig.json index b4aff40b..9b738dbb 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -1,6 +1,13 @@ { "$schema": "https://json.schemastore.org/tsconfig", "extends": "@vben/tsconfig/web.json", - "include": [".vitepress/*.mts", ".vitepress/**/*.ts", ".vitepress/**/*.vue"], + "include": [ + ".vitepress/*.mts", + ".vitepress/**/*.ts", + ".vitepress/**/*.vue", + "src/*.mts", + "src/**/*.ts", + "src/**/*.vue" + ], "exclude": ["node_modules"] } diff --git a/internal/vite-config/package.json b/internal/vite-config/package.json index fc5ef335..16926623 100644 --- a/internal/vite-config/package.json +++ b/internal/vite-config/package.json @@ -45,7 +45,7 @@ "@vitejs/plugin-vue-jsx": "^4.0.1", "dayjs": "^1.11.13", "dotenv": "^16.4.5", - "rollup": "^4.21.0", + "rollup": "^4.21.1", "rollup-plugin-visualizer": "^5.12.0", "sass": "^1.77.8", "vite": "^5.4.2", diff --git a/package.json b/package.json index 5ca5d6b7..7a320d8a 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "node": ">=20", "pnpm": ">=9" }, - "packageManager": "pnpm@9.7.1", + "packageManager": "pnpm@9.9.0", "pnpm": { "peerDependencyRules": { "allowedVersions": { diff --git a/packages/@core/composables/package.json b/packages/@core/composables/package.json index fe7b09ac..337886e1 100644 --- a/packages/@core/composables/package.json +++ b/packages/@core/composables/package.json @@ -37,7 +37,7 @@ "dependencies": { "@vben-core/shared": "workspace:*", "@vueuse/core": "^11.0.3", - "radix-vue": "^1.9.4", + "radix-vue": "^1.9.5", "sortablejs": "^1.15.2", "vue": "^3.4.38" }, diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue index 2e2c981c..7fd4dd77 100644 --- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue +++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue @@ -184,9 +184,6 @@ const headerFixed = computed(() => { }); const showSidebar = computed(() => { - // if (isMixedNav.value && !props.sideHidden) { - // return false; - // } return isSideMode.value && sidebarEnable.value; }); diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json index 054f2e78..5f454c76 100644 --- a/packages/@core/ui-kit/shadcn-ui/package.json +++ b/packages/@core/ui-kit/shadcn-ui/package.json @@ -49,7 +49,7 @@ "@vueuse/core": "^11.0.3", "class-variance-authority": "^0.7.0", "lucide-vue-next": "^0.436.0", - "radix-vue": "^1.9.4", + "radix-vue": "^1.9.5", "vue": "^3.4.38" } } diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue index 740ef4b3..2cd11c88 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue +++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue @@ -14,7 +14,7 @@ interface Props { contentClass?: any; contentStyle?: StyleValue; delayDuration?: number; - side: TooltipContentProps['side']; + side?: TooltipContentProps['side']; } withDefaults(defineProps(), { @@ -33,7 +33,7 @@ withDefaults(defineProps(), { :class="contentClass" :side="side" :style="contentStyle" - class="side-content text-popover-foreground bg-popover" + class="side-content text-popover-foreground bg-accent rounded-md" > diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts index b4e7f482..8e62c781 100644 --- a/packages/effects/common-ui/src/components/index.ts +++ b/packages/effects/common-ui/src/components/index.ts @@ -1,3 +1,5 @@ export * from './ellipsis-text'; export * from './page'; export * from '@vben-core/popup-ui'; + +export { VbenButton } from '@vben-core/shadcn-ui'; diff --git a/packages/effects/common-ui/src/ui/authentication/login.vue b/packages/effects/common-ui/src/ui/authentication/login.vue index 6b239347..feb70dfe 100644 --- a/packages/effects/common-ui/src/ui/authentication/login.vue +++ b/packages/effects/common-ui/src/ui/authentication/login.vue @@ -161,7 +161,7 @@ defineExpose({ resetCaptcha });