diff --git a/.github/contributing.md b/.github/contributing.md index 9a5211b2..f22370f3 100644 --- a/.github/contributing.md +++ b/.github/contributing.md @@ -1,5 +1,42 @@ -# Contributing Guide +# Vben Admin Contributing Guide -1. Make sure you put things in the right category! -2. Always add your items to the end of a list. To be fair, the order is first-come-first-serve. -3. If you think something belongs in the wrong category, or think there needs to be a new category, feel free to edit things too. +Hi! We're really excited that you are interested in contributing to Vben Admin. Before submitting your contribution, please make sure to take a moment and read through the following guidelines: + +- [Pull Request Guidelines](#pull-request-guidelines) + +## Contributor Code of Conduct + +As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. + +We are committed to making participation in this project a harassment-free experience for everyone, regardless of the level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion. + +Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. + +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team. + +## Pull Request Guidelines + +- Checkout a topic branch from the relevant branch, e.g. main, and merge back against that branch. + +- If adding a new feature: + + - Provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first and have it approved before working on it. + +- If fixing bug: + + - Provide a detailed description of the bug in the PR. Live demo preferred. + +- It's OK to have multiple small commits as you work on the PR - GitHub can automatically squash them before merging. + +## Development Setup + +You will need [pnpm](https://pnpm.io/) + +After cloning the repo, run: + +```bash +# install the dependencies of the project +$ pnpm install +# start the project +$ pnpm run dev +``` diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml index 6fef16be..f700c636 100644 --- a/.github/release-drafter.yml +++ b/.github/release-drafter.yml @@ -25,7 +25,7 @@ categories: - "perf" - "chore" - "dependencies" - collapse-after: 5 + # collapse-after: 12 - title: 🚦 Tests labels: - "tests" @@ -40,11 +40,10 @@ version-resolver: minor: labels: - "minor" - # - "feature" + - "feature" patch: labels: - "patch" - - "feature" - "bug" - "maintenance" - "docs" diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 9832a900..d3363c1b 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -6,7 +6,46 @@ on: - main jobs: - deploy-push-ftp: + deploy-push-playground-ftp: + name: Deploy Push Ftp + if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Sed Config Base + shell: bash + run: | + sed -i "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./playground/.env.production + sed -i "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./playground/.env.production + cat ./playground/.env.production + + - name: Setup Node + uses: ./.github/actions/setup-node + + - name: Build + run: pnpm run build + + - name: Sync Playground files + uses: SamKirkland/FTP-Deploy-Action@v4.3.5 + with: + server: ${{ secrets.PRO_FTP_HOST }} + username: ${{ secrets.WEB_PLAYGROUND_FTP_ACCOUNT }} + password: ${{ secrets.WEB_PLAYGROUND_FTP_PWSSWORD }} + local-dir: ./playground/dist/ + + - name: Sync Docs files + uses: SamKirkland/FTP-Deploy-Action@v4.3.5 + with: + server: ${{ secrets.PRO_FTP_HOST }} + username: ${{ secrets.WEBSITE_FTP_ACCOUNT }} + password: ${{ secrets.WEBSITE_FTP_PASSWORD }} + local-dir: ./docs/.vitepress/dist/ + + deploy-push-antd-ftp: name: Deploy Push Ftp if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') runs-on: ubuntu-latest @@ -22,9 +61,65 @@ jobs: sed -i "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./apps/web-antd/.env.production sed -i "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./apps/web-antd/.env.production cat ./apps/web-antd/.env.production + + - name: Setup Node + uses: ./.github/actions/setup-node + + - name: Build + run: pnpm run build + + - name: Sync files + uses: SamKirkland/FTP-Deploy-Action@v4.3.5 + with: + server: ${{ secrets.PRO_FTP_HOST }} + username: ${{ secrets.WEB_ANTD_FTP_ACCOUNT }} + password: ${{ secrets.WEB_ANTD_FTP_PASSWORD }} + local-dir: ./apps/web-antd/dist/ + + deploy-push-ele-ftp: + name: Deploy Push Ftp + if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Sed Config Base + shell: bash + run: | sed -i "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./apps/web-ele/.env.production sed -i "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./apps/web-ele/.env.production cat ./apps/web-ele/.env.production + + - name: Setup Node + uses: ./.github/actions/setup-node + + - name: Build + run: pnpm run build + + - name: Sync files + uses: SamKirkland/FTP-Deploy-Action@v4.3.5 + with: + server: ${{ secrets.PRO_FTP_HOST }} + username: ${{ secrets.WEB_ELE_FTP_ACCOUNT }} + password: ${{ secrets.WEB_ELE_FTP_PASSWORD }} + local-dir: ./apps/web-ele/dist/ + + deploy-push-naive-ftp: + name: Deploy Push Ftp + if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Sed Config Base + shell: bash + run: | sed -i "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./apps/web-naive/.env.production sed -i "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./apps/web-naive/.env.production cat ./apps/web-naive/.env.production @@ -35,34 +130,10 @@ jobs: - name: Build run: pnpm run build - - name: Sync Web Antd files - uses: SamKirkland/FTP-Deploy-Action@v4.3.5 - with: - server: ${{ secrets.PRO_FTP_HOST }} - username: ${{ secrets.WEB_ANTD_FTP_ACCOUNT }} - password: ${{ secrets.WEB_ANTD_FTP_PASSWORD }} - local-dir: ./apps/web-antd/dist/ - - - name: Sync Web Naive files + - name: Sync files uses: SamKirkland/FTP-Deploy-Action@v4.3.5 with: server: ${{ secrets.PRO_FTP_HOST }} username: ${{ secrets.WEB_NAIVE_FTP_ACCOUNT }} password: ${{ secrets.WEB_NAIVE_FTP_PASSWORD }} local-dir: ./apps/web-naive/dist/ - - - name: Sync Web Ele files - uses: SamKirkland/FTP-Deploy-Action@v4.3.5 - with: - server: ${{ secrets.PRO_FTP_HOST }} - username: ${{ secrets.WEB_ELE_FTP_ACCOUNT }} - password: ${{ secrets.WEB_ELE_FTP_PASSWORD }} - local-dir: ./apps/web-ele/dist/ - - - name: Sync Docs files - uses: SamKirkland/FTP-Deploy-Action@v4.3.5 - with: - server: ${{ secrets.PRO_FTP_HOST }} - username: ${{ secrets.WEBSITE_FTP_ACCOUNT }} - password: ${{ secrets.WEBSITE_FTP_PASSWORD }} - local-dir: ./docs/.vitepress/dist/ diff --git a/.vscode/extensions.json b/.vscode/extensions.json index a0fec000..cf48052d 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -10,10 +10,6 @@ "esbenp.prettier-vscode", // 支持 dotenv 文件语法 "mikestead.dotenv", - // 获取每个 CSS 属性的初始值。 - "dzhavat.css-initial-value", - // 使 VSCode 中的 TypeScript 错误更漂亮、更易于理解 - "yoavbls.pretty-ts-errors", // 源代码的拼写检查器 "streetsidesoftware.code-spell-checker", // Tailwind CSS 的官方 VS Code 插件 diff --git a/.vscode/launch.json b/.vscode/launch.json index 08bd54f0..3b4e323c 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -4,18 +4,27 @@ "configurations": [ { "type": "chrome", - "name": "vben admin antd dev", + "name": "vben admin playground dev", "request": "launch", "url": "http://localhost:5555", "env": { "NODE_ENV": "development" }, "sourceMaps": true, + "webRoot": "${workspaceFolder}/playground/src" + }, + { + "type": "chrome", + "name": "vben admin antd dev", + "request": "launch", + "url": "http://localhost:5666", + "env": { "NODE_ENV": "development" }, + "sourceMaps": true, "webRoot": "${workspaceFolder}/apps/web-antd/src" }, { "type": "chrome", "name": "vben admin ele dev", "request": "launch", - "url": "http://localhost:5666", + "url": "http://localhost:5777", "env": { "NODE_ENV": "development" }, "sourceMaps": true, "webRoot": "${workspaceFolder}/apps/web-ele/src" @@ -24,7 +33,7 @@ "type": "chrome", "name": "vben admin naive dev", "request": "launch", - "url": "http://localhost:5777", + "url": "http://localhost:5888", "env": { "NODE_ENV": "development" }, "sourceMaps": true, "webRoot": "${workspaceFolder}/apps/web-naive/src" diff --git a/.vscode/settings.json b/.vscode/settings.json index 563f7f15..6a97d0aa 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -167,6 +167,7 @@ "i18n-ally.localesPaths": [ "packages/locales/src/langs", + "playground/src/langs", "apps/*/src/locales/langs" ], "i18n-ally.enabledParsers": ["json", "ts", "js", "yaml"], diff --git a/Dockerfile b/Dockerfile index 4b76d886..61076b6d 100644 --- a/Dockerfile +++ b/Dockerfile @@ -21,7 +21,7 @@ RUN echo "Builder Success 🎉" FROM nginx:stable-alpine as production RUN echo "types { application/javascript js mjs; }" > /etc/nginx/conf.d/mjs.conf -COPY --from=builder /app/apps/web-antd/dist /usr/share/nginx/html +COPY --from=builder /app/playground/dist /usr/share/nginx/html COPY ./nginx.conf /etc/nginx/nginx.conf diff --git a/README.ja-JP.md b/README.ja-JP.md index f794c792..700f8357 100644 --- a/README.ja-JP.md +++ b/README.ja-JP.md @@ -134,7 +134,8 @@ pnpm build ## 貢献者 - + Contributors ## Discord diff --git a/README.md b/README.md index 5ce954bc..7cf502ed 100644 --- a/README.md +++ b/README.md @@ -133,7 +133,8 @@ If you think this project is helpful to you, you can help the author buy a cup o ## Contributor - + Contributors ## Discord diff --git a/README.zh-CN.md b/README.zh-CN.md index 9137ef6e..73e8fbeb 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -126,6 +126,13 @@ pnpm build Paypal Me +## Contributor + + + Contributors + + ## Discord - [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions) diff --git a/apps/web-antd/.env b/apps/web-antd/.env index 87821d87..c14a467f 100644 --- a/apps/web-antd/.env +++ b/apps/web-antd/.env @@ -1,5 +1,5 @@ # 应用标题 -VITE_APP_TITLE=Vben Admin +VITE_APP_TITLE=Vben Admin Antd # 应用命名空间，用于缓存、store等功能的前缀，确保隔离 VITE_APP_NAMESPACE=vben-web-antd diff --git a/apps/web-antd/.env.development b/apps/web-antd/.env.development index dcf361e7..c138f482 100644 --- a/apps/web-antd/.env.development +++ b/apps/web-antd/.env.development @@ -1,5 +1,5 @@ # 端口号 -VITE_PORT=5555 +VITE_PORT=5666 VITE_BASE=/ diff --git a/apps/web-antd/index.html b/apps/web-antd/index.html index ca532699..480eb84d 100644 --- a/apps/web-antd/index.html +++ b/apps/web-antd/index.html @@ -21,7 +21,7 @@ (function () { var hm = document.createElement('script'); hm.src = - 'https://hm.baidu.com/hm.js?d20a01273820422b6aa2ee41b6c9414d'; + 'https://hm.baidu.com/hm.js?b38e689f40558f20a9a686d7f6f33edf'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hm, s); })(); diff --git a/apps/web-antd/src/api/index.ts b/apps/web-antd/src/api/index.ts index 2b42e898..4b0e0413 100644 --- a/apps/web-antd/src/api/index.ts +++ b/apps/web-antd/src/api/index.ts @@ -1,2 +1 @@ export * from './core'; -export * from './demos'; diff --git a/apps/web-antd/src/api/request.ts b/apps/web-antd/src/api/request.ts index 7cd11e27..19b0e250 100644 --- a/apps/web-antd/src/api/request.ts +++ b/apps/web-antd/src/api/request.ts @@ -59,7 +59,7 @@ function createRequestClient(baseURL: string) { if (status >= 200 && status < 400 && code === 0) { return data; } - throw new Error(msg); + throw new Error(`Error ${status}: ${msg}`); }); return client; } diff --git a/apps/web-antd/src/locales/index.ts b/apps/web-antd/src/locales/index.ts index ef3b8d5c..4ee7511b 100644 --- a/apps/web-antd/src/locales/index.ts +++ b/apps/web-antd/src/locales/index.ts @@ -58,7 +58,11 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) { locale = await import('dayjs/locale/en'); } } - dayjs.locale(locale); + if (locale) { + dayjs.locale(locale); + } else { + console.error(`Failed to load dayjs locale for ${lang}`); + } } /** diff --git a/apps/web-antd/src/locales/langs/en-US.json b/apps/web-antd/src/locales/langs/en-US.json index 13179fd2..864c721f 100644 --- a/apps/web-antd/src/locales/langs/en-US.json +++ b/apps/web-antd/src/locales/langs/en-US.json @@ -2,66 +2,7 @@ "page": { "demos": { "title": "Demos", - "access": { - "frontendPermissions": "Frontend Permissions", - "backendPermissions": "Backend Permissions", - "pageAccess": "Page Access", - "buttonControl": "Button Control", - "menuVisible403": "Menu Visible(403)", - "superVisible": "Visible to Super", - "adminVisible": "Visible to Admin", - "userVisible": "Visible to User" - }, - "nested": { - "title": "Nested Menu", - "menu1": "Menu 1", - "menu2": "Menu 2", - "menu2_1": "Menu 2-1", - "menu3": "Menu 3", - "menu3_1": "Menu 3-1", - "menu3_2": "Menu 3-2", - "menu3_2_1": "Menu 3-2-1" - }, - "outside": { - "title": "External Pages", - "embedded": "Embedded", - "externalLink": "External Link" - }, - "badge": { - "title": "Menu Badge", - "dot": "Dot Badge", - "text": "Text Badge", - "color": "Badge Color" - }, - "activeIcon": { - "title": "Active Menu Icon", - "children": "Children Active Icon" - }, - "fallback": { - "title": "Fallback Page" - }, - "features": { - "title": "Features", - "hideChildrenInMenu": "Hide Menu Children", - "loginExpired": "Login Expired", - "icons": "Icons", - "watermark": "Watermark", - "tabs": "Tabs", - "tabDetail": "Tab Detail Page" - }, - "breadcrumb": { - "navigation": "Breadcrumb Navigation", - "lateral": "Lateral Mode", - "lateralDetail": "Lateral Mode Detail", - "level": "Level Mode", - "levelDetail": "Level Mode Detail" - } - }, - "examples": { - "title": "Examples", - "ellipsis": { - "title": "EllipsisText" - } + "antd": "Ant Design Vue" } } } diff --git a/apps/web-antd/src/locales/langs/zh-CN.json b/apps/web-antd/src/locales/langs/zh-CN.json index 86fbcabc..31d3475b 100644 --- a/apps/web-antd/src/locales/langs/zh-CN.json +++ b/apps/web-antd/src/locales/langs/zh-CN.json @@ -2,66 +2,7 @@ "page": { "demos": { "title": "演示", - "access": { - "frontendPermissions": "前端权限", - "backendPermissions": "后端权限", - "pageAccess": "页面访问", - "buttonControl": "按钮控制", - "menuVisible403": "菜单可见(403)", - "superVisible": "Super 可见", - "adminVisible": "Admin 可见", - "userVisible": "User 可见" - }, - "nested": { - "title": "嵌套菜单", - "menu1": "菜单 1", - "menu2": "菜单 2", - "menu2_1": "菜单 2-1", - "menu3": "菜单 3", - "menu3_1": "菜单 3-1", - "menu3_2": "菜单 3-2", - "menu3_2_1": "菜单 3-2-1" - }, - "outside": { - "title": "外部页面", - "embedded": "内嵌", - "externalLink": "外链" - }, - "badge": { - "title": "菜单徽标", - "dot": "点徽标", - "text": "文本徽标", - "color": "徽标颜色" - }, - "activeIcon": { - "title": "菜单激活图标", - "children": "子级激活图标" - }, - "fallback": { - "title": "缺省页" - }, - "features": { - "title": "功能", - "hideChildrenInMenu": "隐藏子菜单", - "loginExpired": "登录过期", - "icons": "图标", - "watermark": "水印", - "tabs": "标签页", - "tabDetail": "标签详情页" - }, - "breadcrumb": { - "navigation": "面包屑导航", - "lateral": "平级模式", - "level": "层级模式", - "levelDetail": "层级模式详情", - "lateralDetail": "平级模式详情" - } - }, - "examples": { - "title": "示例", - "ellipsis": { - "title": "文本省略" - } + "antd": "Ant Design Vue" } } } diff --git a/apps/web-antd/src/router/routes/modules/demos.ts b/apps/web-antd/src/router/routes/modules/demos.ts index ad88a548..fa28acc7 100644 --- a/apps/web-antd/src/router/routes/modules/demos.ts +++ b/apps/web-antd/src/router/routes/modules/demos.ts @@ -1,6 +1,6 @@ import type { RouteRecordRaw } from 'vue-router'; -import { BasicLayout, IFrameView } from '#/layouts'; +import { BasicLayout } from '#/layouts'; import { $t } from '#/locales'; const routes: RouteRecordRaw[] = [ @@ -15,477 +15,13 @@ const routes: RouteRecordRaw[] = [ name: 'Demos', path: '/demos', children: [ - // 权限控制 { meta: { - icon: 'mdi:shield-key-outline', - title: $t('page.demos.access.frontendPermissions'), + title: $t('page.demos.antd'), }, - name: 'AccessDemos', - path: '/demos/access', - children: [ - { - name: 'AccessPageControlDemo', - path: '/demos/access/page-control', - component: () => import('#/views/demos/access/index.vue'), - meta: { - icon: 'mdi:page-previous-outline', - title: $t('page.demos.access.pageAccess'), - }, - }, - { - name: 'AccessButtonControlDemo', - path: '/demos/access/button-control', - component: () => import('#/views/demos/access/button-control.vue'), - meta: { - icon: 'mdi:button-cursor', - title: $t('page.demos.access.buttonControl'), - }, - }, - { - name: 'AccessMenuVisible403Demo', - path: '/demos/access/menu-visible-403', - component: () => - import('#/views/demos/access/menu-visible-403.vue'), - meta: { - authority: ['no-body'], - icon: 'mdi:button-cursor', - menuVisibleWithForbidden: true, - title: $t('page.demos.access.menuVisible403'), - }, - }, - { - name: 'AccessSuperVisibleDemo', - path: '/demos/access/super-visible', - component: () => import('#/views/demos/access/super-visible.vue'), - meta: { - authority: ['super'], - icon: 'mdi:button-cursor', - title: $t('page.demos.access.superVisible'), - }, - }, - { - name: 'AccessAdminVisibleDemo', - path: '/demos/access/admin-visible', - component: () => import('#/views/demos/access/admin-visible.vue'), - meta: { - authority: ['admin'], - icon: 'mdi:button-cursor', - title: $t('page.demos.access.adminVisible'), - }, - }, - { - name: 'AccessUserVisibleDemo', - path: '/demos/access/user-visible', - component: () => import('#/views/demos/access/user-visible.vue'), - meta: { - authority: ['user'], - icon: 'mdi:button-cursor', - title: $t('page.demos.access.userVisible'), - }, - }, - ], - }, - // 功能 - { - meta: { - icon: 'mdi:feature-highlight', - title: $t('page.demos.features.title'), - }, - name: 'FeaturesDemos', - path: '/demos/features', - children: [ - { - name: 'LoginExpiredDemo', - path: '/demos/features/login-expired', - component: () => - import('#/views/demos/features/login-expired/index.vue'), - meta: { - icon: 'mdi:encryption-expiration', - title: $t('page.demos.features.loginExpired'), - }, - }, - { - name: 'IconsDemo', - path: '/demos/features/icons', - component: () => import('#/views/demos/features/icons/index.vue'), - meta: { - title: $t('page.demos.features.icons'), - }, - }, - { - name: 'WatermarkDemo', - path: '/demos/features/watermark', - component: () => - import('#/views/demos/features/watermark/index.vue'), - meta: { - title: $t('page.demos.features.watermark'), - }, - }, - { - name: 'FeatureTabsDemo', - path: '/demos/features/tabs', - component: () => import('#/views/demos/features/tabs/index.vue'), - meta: { - icon: 'lucide:app-window', - title: $t('page.demos.features.tabs'), - }, - }, - { - name: 'FeatureTabDetailDemo', - path: '/demos/features/tabs/detail/:id', - component: () => - import('#/views/demos/features/tabs/tab-detail.vue'), - meta: { - activePath: '/demos/features/tabs', - hideInMenu: true, - maxNumOfOpenTab: 3, - title: $t('page.demos.features.tabDetail'), - }, - }, - { - name: 'HideChildrenInMenuParentDemo', - path: '/demos/features/hide-menu-children', - component: () => - import('#/views/demos/features/hide-menu-children/parent.vue'), - meta: { - hideChildrenInMenu: true, - icon: 'ic:round-menu', - title: $t('page.demos.features.hideChildrenInMenu'), - }, - children: [ - { - name: 'HideChildrenInMenuChildrenDemo', - path: '/demos/features/hide-menu-children/children', - component: () => - import( - '#/views/demos/features/hide-menu-children/children.vue' - ), - meta: { title: 'HideChildrenInMenuChildrenDemo' }, - }, - ], - }, - ], - }, - // 面包屑导航 - { - name: 'BreadcrumbDemos', - path: '/demos/breadcrumb', - meta: { - icon: 'lucide:navigation', - title: $t('page.demos.breadcrumb.navigation'), - }, - children: [ - { - name: 'BreadcrumbLateralDemo', - path: '/demos/breadcrumb/lateral', - component: () => import('#/views/demos/breadcrumb/lateral.vue'), - meta: { - icon: 'lucide:navigation', - title: $t('page.demos.breadcrumb.lateral'), - }, - }, - { - name: 'BreadcrumbLateralDetailDemo', - path: '/demos/breadcrumb/lateral-detail', - component: () => - import('#/views/demos/breadcrumb/lateral-detail.vue'), - meta: { - activePath: '/demos/breadcrumb/lateral', - hideInMenu: true, - title: $t('page.demos.breadcrumb.lateralDetail'), - }, - }, - { - name: 'BreadcrumbLevelDemo', - path: '/demos/breadcrumb/level', - meta: { - icon: 'lucide:navigation', - title: $t('page.demos.breadcrumb.level'), - }, - children: [ - { - name: 'BreadcrumbLevelDetailDemo', - path: '/demos/breadcrumb/level/detail', - component: () => - import('#/views/demos/breadcrumb/level-detail.vue'), - meta: { - title: $t('page.demos.breadcrumb.levelDetail'), - }, - }, - ], - }, - ], - }, - // 缺省页 - { - meta: { - icon: 'mdi:lightbulb-error-outline', - title: $t('page.demos.fallback.title'), - }, - name: 'FallbackDemos', - path: '/demos/fallback', - children: [ - { - name: 'Fallback403Demo', - path: '/demos/fallback/403', - component: () => import('#/views/_core/fallback/forbidden.vue'), - meta: { - icon: 'mdi:do-not-disturb-alt', - title: '403', - }, - }, - { - name: 'Fallback404Demo', - path: '/demos/fallback/404', - component: () => import('#/views/_core/fallback/not-found.vue'), - meta: { - icon: 'mdi:table-off', - title: '404', - }, - }, - { - name: 'Fallback500Demo', - path: '/demos/fallback/500', - component: () => - import('#/views/_core/fallback/internal-error.vue'), - meta: { - icon: 'mdi:server-network-off', - title: '500', - }, - }, - { - name: 'FallbackOfflineDemo', - path: '/demos/fallback/offline', - component: () => import('#/views/_core/fallback/offline.vue'), - meta: { - icon: 'mdi:offline', - title: $t('fallback.offline'), - }, - }, - ], - }, - // 菜单徽标 - { - meta: { - badgeType: 'dot', - badgeVariants: 'destructive', - icon: 'lucide:circle-dot', - title: $t('page.demos.badge.title'), - }, - name: 'BadgeDemos', - path: '/demos/badge', - children: [ - { - name: 'BadgeDotDemo', - component: () => import('#/views/demos/badge/index.vue'), - path: '/demos/badge/dot', - meta: { - badgeType: 'dot', - icon: 'lucide:square-dot', - title: $t('page.demos.badge.dot'), - }, - }, - { - name: 'BadgeTextDemo', - component: () => import('#/views/demos/badge/index.vue'), - path: '/demos/badge/text', - meta: { - badge: '10', - icon: 'lucide:square-dot', - title: $t('page.demos.badge.text'), - }, - }, - { - name: 'BadgeColorDemo', - component: () => import('#/views/demos/badge/index.vue'), - path: '/demos/badge/color', - meta: { - badge: 'Hot', - badgeVariants: 'destructive', - icon: 'lucide:square-dot', - title: $t('page.demos.badge.color'), - }, - }, - ], - }, - // 菜单激活图标 - { - meta: { - activeIcon: 'fluent-emoji:radioactive', - icon: 'bi:radioactive', - title: $t('page.demos.activeIcon.title'), - }, - name: 'ActiveIconDemos', - path: '/demos/active-icon', - children: [ - { - name: 'ActiveIconDemo', - component: () => import('#/views/demos/active-icon/index.vue'), - path: '/demos/active-icon/children', - meta: { - activeIcon: 'fluent-emoji:radioactive', - icon: 'bi:radioactive', - title: $t('page.demos.activeIcon.children'), - }, - }, - ], - }, - // 外部链接 - { - meta: { - icon: 'ic:round-settings-input-composite', - title: $t('page.demos.outside.title'), - }, - name: 'OutsideDemos', - path: '/demos/outside', - children: [ - { - name: 'IframeDemos', - path: '/demos/outside/iframe', - meta: { - icon: 'mdi:newspaper-variant-outline', - title: $t('page.demos.outside.embedded'), - }, - children: [ - { - name: 'VueDocumentDemo', - path: '/demos/outside/iframe/vue-document', - component: IFrameView, - meta: { - icon: 'logos:vue', - iframeSrc: 'https://cn.vuejs.org/', - keepAlive: true, - title: 'Vue', - }, - }, - { - name: 'TailwindcssDemo', - path: '/demos/outside/iframe/tailwindcss', - component: IFrameView, - meta: { - icon: 'devicon:tailwindcss', - iframeSrc: 'https://tailwindcss.com/', - // keepAlive: true, - title: 'Tailwindcss', - }, - }, - ], - }, - { - name: 'ExternalLinkDemos', - path: '/demos/outside/external-link', - meta: { - icon: 'mdi:newspaper-variant-multiple-outline', - title: $t('page.demos.outside.externalLink'), - }, - children: [ - { - name: 'ViteDemo', - path: '/demos/outside/external-link/vite', - component: IFrameView, - meta: { - icon: 'logos:vitejs', - link: 'https://vitejs.dev/', - title: 'Vite', - }, - }, - { - name: 'VueUseDemo', - path: '/demos/outside/external-link/vue-use', - component: IFrameView, - meta: { - icon: 'logos:vueuse', - link: 'https://vueuse.org', - title: 'VueUse', - }, - }, - ], - }, - ], - }, - // 嵌套菜单 - { - meta: { - icon: 'ic:round-menu', - title: $t('page.demos.nested.title'), - }, - name: 'NestedDemos', - path: '/demos/nested', - children: [ - { - name: 'Menu1Demo', - path: '/demos/nested/menu1', - component: () => import('#/views/demos/nested/menu-1.vue'), - meta: { - icon: 'ic:round-menu', - keepAlive: true, - title: $t('page.demos.nested.menu1'), - }, - }, - { - name: 'Menu2Demo', - path: '/demos/nested/menu2', - meta: { - icon: 'ic:round-menu', - keepAlive: true, - title: $t('page.demos.nested.menu2'), - }, - children: [ - { - name: 'Menu21Demo', - path: '/demos/nested/menu2/menu2-1', - component: () => import('#/views/demos/nested/menu-2-1.vue'), - meta: { - icon: 'ic:round-menu', - keepAlive: true, - title: $t('page.demos.nested.menu2_1'), - }, - }, - ], - }, - { - name: 'Menu3Demo', - path: '/demos/nested/menu3', - meta: { - icon: 'ic:round-menu', - title: $t('page.demos.nested.menu3'), - }, - children: [ - { - name: 'Menu31Demo', - path: 'menu3-1', - component: () => import('#/views/demos/nested/menu-3-1.vue'), - meta: { - icon: 'ic:round-menu', - keepAlive: true, - title: $t('page.demos.nested.menu3_1'), - }, - }, - { - name: 'Menu32Demo', - path: 'menu3-2', - meta: { - icon: 'ic:round-menu', - title: $t('page.demos.nested.menu3_2'), - }, - children: [ - { - name: 'Menu321Demo', - path: '/demos/nested/menu3/menu3-2/menu3-2-1', - component: () => - import('#/views/demos/nested/menu-3-2-1.vue'), - meta: { - icon: 'ic:round-menu', - keepAlive: true, - title: $t('page.demos.nested.menu3_2_1'), - }, - }, - ], - }, - ], - }, - ], + name: 'AntDesignDemos', + path: '/demos/ant-design', + component: () => import('#/views/demos/antd/index.vue'), }, ], }, diff --git a/apps/web-antd/src/router/routes/modules/vben.ts b/apps/web-antd/src/router/routes/modules/vben.ts index 3a0daabe..48e38fb2 100644 --- a/apps/web-antd/src/router/routes/modules/vben.ts +++ b/apps/web-antd/src/router/routes/modules/vben.ts @@ -38,8 +38,7 @@ const routes: RouteRecordRaw[] = [ component: IFrameView, meta: { icon: 'lucide:book-open-text', - iframeSrc: VBEN_DOC_URL, - keepAlive: true, + link: VBEN_DOC_URL, title: $t('page.vben.document'), }, }, diff --git a/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue b/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue index 1bef4d4e..261c847c 100644 --- a/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue +++ b/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue @@ -13,7 +13,7 @@ onMounted(() => { containLabel: true, left: '1%', right: '1%', - top: '2 %', + top: '2 %', }, series: [ { diff --git a/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue b/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue index 4dfc163f..8230f6e5 100644 --- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue +++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue @@ -13,7 +13,7 @@ onMounted(() => { containLabel: true, left: '1%', right: '1%', - top: '2 %', + top: '2 %', }, series: [ { diff --git a/apps/web-antd/src/views/demos/antd/index.vue b/apps/web-antd/src/views/demos/antd/index.vue new file mode 100644 index 00000000..a9710f12 --- /dev/null +++ b/apps/web-antd/src/views/demos/antd/index.vue @@ -0,0 +1,86 @@ + + + diff --git a/apps/web-ele/.env.development b/apps/web-ele/.env.development index c138f482..8bcb432e 100644 --- a/apps/web-ele/.env.development +++ b/apps/web-ele/.env.development @@ -1,5 +1,5 @@ # 端口号 -VITE_PORT=5666 +VITE_PORT=5777 VITE_BASE=/ diff --git a/apps/web-ele/src/api/request.ts b/apps/web-ele/src/api/request.ts index ac6c0f9b..dd781650 100644 --- a/apps/web-ele/src/api/request.ts +++ b/apps/web-ele/src/api/request.ts @@ -59,7 +59,7 @@ function createRequestClient(baseURL: string) { if (status >= 200 && status < 400 && code === 0) { return data; } - throw new Error(msg); + throw new Error(`Error ${status}: ${msg}`); }); return client; } diff --git a/apps/web-ele/src/locales/index.ts b/apps/web-ele/src/locales/index.ts index 186935e0..695cff56 100644 --- a/apps/web-ele/src/locales/index.ts +++ b/apps/web-ele/src/locales/index.ts @@ -58,7 +58,11 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) { locale = await import('dayjs/locale/en'); } } - dayjs.locale(locale); + if (locale) { + dayjs.locale(locale); + } else { + console.error(`Failed to load dayjs locale for ${lang}`); + } } /** diff --git a/apps/web-ele/src/router/routes/modules/demos.ts b/apps/web-ele/src/router/routes/modules/demos.ts index 25a58989..7b638a99 100644 --- a/apps/web-ele/src/router/routes/modules/demos.ts +++ b/apps/web-ele/src/router/routes/modules/demos.ts @@ -17,7 +17,6 @@ const routes: RouteRecordRaw[] = [ children: [ { meta: { - icon: 'mdi:shield-key-outline', title: $t('page.demos.element-plus'), }, name: 'NaiveDemos', diff --git a/apps/web-ele/src/router/routes/modules/vben.ts b/apps/web-ele/src/router/routes/modules/vben.ts index a5ced040..3a8f2e94 100644 --- a/apps/web-ele/src/router/routes/modules/vben.ts +++ b/apps/web-ele/src/router/routes/modules/vben.ts @@ -1,11 +1,11 @@ import type { RouteRecordRaw } from 'vue-router'; import { + VBEN_ANT_PREVIEW_URL, VBEN_DOC_URL, VBEN_GITHUB_URL, VBEN_LOGO_URL, VBEN_NAIVE_PREVIEW_URL, - VBEN_PREVIEW_URL, } from '@vben/constants'; import { BasicLayout, IFrameView } from '#/layouts'; @@ -38,8 +38,7 @@ const routes: RouteRecordRaw[] = [ component: IFrameView, meta: { icon: 'lucide:book-open-text', - iframeSrc: VBEN_DOC_URL, - keepAlive: true, + link: VBEN_DOC_URL, title: $t('page.vben.document'), }, }, @@ -69,7 +68,7 @@ const routes: RouteRecordRaw[] = [ component: IFrameView, meta: { badgeType: 'dot', - link: VBEN_PREVIEW_URL, + link: VBEN_ANT_PREVIEW_URL, title: $t('page.vben.antdv'), }, }, diff --git a/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue b/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue index 1bef4d4e..261c847c 100644 --- a/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue +++ b/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue @@ -13,7 +13,7 @@ onMounted(() => { containLabel: true, left: '1%', right: '1%', - top: '2 %', + top: '2 %', }, series: [ { diff --git a/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue b/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue index 4dfc163f..8230f6e5 100644 --- a/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue +++ b/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue @@ -13,7 +13,7 @@ onMounted(() => { containLabel: true, left: '1%', right: '1%', - top: '2 %', + top: '2 %', }, series: [ { diff --git a/apps/web-naive/.env.development b/apps/web-naive/.env.development index 8bcb432e..11c5254a 100644 --- a/apps/web-naive/.env.development +++ b/apps/web-naive/.env.development @@ -1,5 +1,5 @@ # 端口号 -VITE_PORT=5777 +VITE_PORT=5888 VITE_BASE=/ diff --git a/apps/web-naive/src/api/request.ts b/apps/web-naive/src/api/request.ts index 524576be..6ebd6d93 100644 --- a/apps/web-naive/src/api/request.ts +++ b/apps/web-naive/src/api/request.ts @@ -58,7 +58,7 @@ function createRequestClient(baseURL: string) { if (status >= 200 && status < 400 && code === 0) { return data; } - throw new Error(msg); + throw new Error(`Error ${status}: ${msg}`); }); return client; } diff --git a/apps/web-naive/src/router/routes/modules/demos.ts b/apps/web-naive/src/router/routes/modules/demos.ts index 8ddf81eb..5a2dc12a 100644 --- a/apps/web-naive/src/router/routes/modules/demos.ts +++ b/apps/web-naive/src/router/routes/modules/demos.ts @@ -17,7 +17,6 @@ const routes: RouteRecordRaw[] = [ children: [ { meta: { - icon: 'mdi:shield-key-outline', title: $t('page.demos.naive'), }, name: 'NaiveDemos', diff --git a/apps/web-naive/src/router/routes/modules/vben.ts b/apps/web-naive/src/router/routes/modules/vben.ts index 3fd5942b..0b1273df 100644 --- a/apps/web-naive/src/router/routes/modules/vben.ts +++ b/apps/web-naive/src/router/routes/modules/vben.ts @@ -1,11 +1,11 @@ import type { RouteRecordRaw } from 'vue-router'; import { + VBEN_ANT_PREVIEW_URL, VBEN_DOC_URL, VBEN_ELE_PREVIEW_URL, VBEN_GITHUB_URL, VBEN_LOGO_URL, - VBEN_PREVIEW_URL, } from '@vben/constants'; import { BasicLayout, IFrameView } from '#/layouts'; @@ -38,8 +38,7 @@ const routes: RouteRecordRaw[] = [ component: IFrameView, meta: { icon: 'lucide:book-open-text', - iframeSrc: VBEN_DOC_URL, - keepAlive: true, + link: VBEN_DOC_URL, title: $t('page.vben.document'), }, }, @@ -59,7 +58,7 @@ const routes: RouteRecordRaw[] = [ component: IFrameView, meta: { badgeType: 'dot', - link: VBEN_PREVIEW_URL, + link: VBEN_ANT_PREVIEW_URL, title: $t('page.vben.antdv'), }, }, diff --git a/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue b/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue index 1bef4d4e..261c847c 100644 --- a/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue +++ b/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue @@ -13,7 +13,7 @@ onMounted(() => { containLabel: true, left: '1%', right: '1%', - top: '2 %', + top: '2 %', }, series: [ { diff --git a/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue b/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue index 4dfc163f..8230f6e5 100644 --- a/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue +++ b/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue @@ -13,7 +13,7 @@ onMounted(() => { containLabel: true, left: '1%', right: '1%', - top: '2 %', + top: '2 %', }, series: [ { diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 3e98f54d..78f9ed27 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -162,7 +162,11 @@ function nav(): DefaultTheme.NavItem[] { items: [ { link: 'https://www.vben.pro', - text: 'Ant Design Vue 版本(默认)', + text: '演示版本', + }, + { + link: 'https://ant.vben.pro', + text: 'Ant Design Vue 版本', }, { link: 'https://naive.vben.pro', @@ -250,6 +254,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] { text: '为什么选择我们?', }, { link: 'introduction/quick-start', text: '快速开始' }, + { link: 'introduction/thin', text: '精简版本' }, ], }, { @@ -284,6 +289,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] { items: [ { link: 'project/standard', text: '规范' }, { link: 'project/cli', text: 'CLI' }, + { link: 'project/dir', text: '目录说明' }, { link: 'project/test', text: '单元测试' }, { link: 'project/tailwindcss', text: 'Tailwind CSS' }, { link: 'project/changeset', text: 'Changeset' }, diff --git a/docs/.vitepress/theme/components/vben-contributors.vue b/docs/.vitepress/theme/components/vben-contributors.vue index 987098b1..9b887d92 100644 --- a/docs/.vitepress/theme/components/vben-contributors.vue +++ b/docs/.vitepress/theme/components/vben-contributors.vue @@ -4,7 +4,10 @@

Contributors

- + Contributors
diff --git a/docs/src/guide/essentials/development.md b/docs/src/guide/essentials/development.md index 8fb82a19..4b92b10f 100644 --- a/docs/src/guide/essentials/development.md +++ b/docs/src/guide/essentials/development.md @@ -78,6 +78,8 @@ npm 脚本是项目常见的配置，用于执行一些常见的任务，比如 "dev:docs": "pnpm -F @vben/docs run dev", // 启动web-ele应用 "dev:ele": "pnpm -F @vben/web-ele run dev", + // 启动演示应用 + "dev:play": "pnpm -F @vben/playground run dev", // 启动web-naive应用 "dev:naive": "pnpm -F @vben/web-naive run dev", // 格式化代码 diff --git a/docs/src/guide/essentials/server.md b/docs/src/guide/essentials/server.md index 5fe13967..26a83934 100644 --- a/docs/src/guide/essentials/server.md +++ b/docs/src/guide/essentials/server.md @@ -221,7 +221,7 @@ function createRequestClient(baseURL: string) { if (status >= 200 && status < 400 && code === 0) { return data; } - throw new Error(msg); + throw new Error(`Error ${status}: ${msg}`); }); return client; } diff --git a/docs/src/guide/in-depth/locale.md b/docs/src/guide/in-depth/locale.md index 69370e15..66626b7e 100644 --- a/docs/src/guide/in-depth/locale.md +++ b/docs/src/guide/in-depth/locale.md @@ -198,7 +198,11 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) { locale = await import('dayjs/locale/en'); } } - dayjs.locale(locale); + if (locale) { + dayjs.locale(locale); + } else { + console.error(`Failed to load dayjs locale for ${lang}`); + } } ``` diff --git a/docs/src/guide/introduction/quick-start.md b/docs/src/guide/introduction/quick-start.md index 47e86160..852414f6 100644 --- a/docs/src/guide/introduction/quick-start.md +++ b/docs/src/guide/introduction/quick-start.md @@ -72,11 +72,24 @@ pnpm install ### 运行项目 -执行以下命令即可运行项目: +执行以下命运行项目: ```bash # 启动项目 pnpm dev ``` +此时，你会看到类似如下的输出，选择你需要运行的项目： + +```bash +│ +◆ Select the app you need to run [dev]: +│ ● @vben/web-antd +│ ○ @vben/web-ele +│ ○ @vben/web-naive +│ ○ @vben/docs +│ ○ @vben/playground +└ +``` + 现在，你可以在浏览器访问 `http://localhost:5555` 查看项目。 diff --git a/docs/src/guide/introduction/thin.md b/docs/src/guide/introduction/thin.md new file mode 100644 index 00000000..818227e9 --- /dev/null +++ b/docs/src/guide/introduction/thin.md @@ -0,0 +1,62 @@ +# 精简版本 + +从 `5.0` 版本开始，我们不再提供精简的仓库或者分支。我们的目标是提供一个更加一致的开发体验，同时减少维护成本。在这里，我们将如何介绍自己的项目，如何去精简以及移除不需要的功能。 + +## 应用精简 + +首先，确认你需要的 `UI` 组件库版本，然后删除对应的应用，比如你选择使用 `Ant Design Vue`，那么你可以删除其他应用， 只需要删除下面两个文件夹即可： + +```bash +apps/web-ele +apps/web-native + +``` + +::: tip + +如果项目没有内置你需要的 `UI` 组件库应用，你可以直接全部删除其他应用。然后自行新建应用即可。 + +::: + +## 演示代码精简 + +如果你不需要演示代码，你可以直接删除的`playground`文件夹。 + +## 文档精简 + +如果你不需要文档，你可以直接删除`docs`文件夹。 + +## Mock 服务精简 + +如果你不需要`Mock`服务，你可以直接删除`apps/backend-mock`文件夹。同时在你的应用下`.env.development`文件中删除`VITE_NITRO_MOCK`变量。 + +```bash +# 是否开启 Nitro Mock服务，true 为开启，false 为关闭 +VITE_NITRO_MOCK=false +``` + +## 安装依赖 + +到这里，你已经完成了精简操作，接下来你可以安装依赖，并启动你的项目： + +```bash +# 根目录下执行 +pnpm install + +``` + +## 命令调整 + +在精简后，你可能需要根据你的项目调整命令，在根目录下的`package.json`文件中，你可以调整`scripts`字段，移除你不需要的命令。 + +```json +{ + "scripts": { + "dev:antd": "pnpm -F @vben/web-antd run dev", + "dev:docs": "pnpm -F @vben/docs run dev", + "dev:ele": "pnpm -F @vben/web-ele run dev", + "dev:play": "pnpm -F @vben/playground run dev", + "dev:naive": "pnpm -F @vben/web-naive run dev" + } +} +``` diff --git a/docs/src/guide/project/dir.md b/docs/src/guide/project/dir.md new file mode 100644 index 00000000..3b32feda --- /dev/null +++ b/docs/src/guide/project/dir.md @@ -0,0 +1,68 @@ +# 目录说明 + +目录使用 Monorepo 管理，项目结构如下： + +```bash +. +├── Dockerfile # Docker 镜像构建文件 +├── README.md # 项目说明文档 +├── apps # 项目应用目录 +│   ├── backend-mock # 后端模拟服务应用 +│   ├── web-antd # 基于 Ant Design Vue 的前端应用 +│   ├── web-ele # 基于 Element Plus 的前端应用 +│   └── web-naive # 基于 Naive UI 的前端应用 +├── build-local-docker-image.sh # 本地构建 Docker 镜像脚本 +├── cspell.json # CSpell 配置文件 +├── docs # 项目文档目录 +├── eslint.config.mjs # ESLint 配置文件 +├── internal # 内部工具目录 +│   ├── lint-configs # 代码检查配置 +│   │   ├── commitlint-config # Commitlint 配置 +│   │   ├── eslint-config # ESLint 配置 +│   │   ├── prettier-config # Prettier 配置 +│   │   └── stylelint-config # Stylelint 配置 +│   ├── node-utils # Node.js 工具 +│   ├── tailwind-config # Tailwind 配置 +│   ├── tsconfig # 通用 tsconfig 配置 +│   └── vite-config # 通用Vite 配置 +├── package.json # 项目依赖配置 +├── packages # 项目包目录 +│   ├── @core # 核心包 +│   │   ├── base # 基础包 +│   │   │   ├── design # 设计相关 +│   │   │   ├── icons # 图标 +│   │   │   ├── shared # 共享 +│   │   │   └── typings # 类型定义 +│   │   ├── composables # 组合式 API +│   │   ├── preferences # 偏好设置 +│   │   └── ui-kit # UI 组件集合 +│   │   ├── layout-ui # 布局 UI +│   │   ├── menu-ui # 菜单 UI +│   │   ├── shadcn-ui # shadcn UI +│   │   └── tabs-ui # 标签页 UI +│   ├── constants # 常量 +│   ├── effects # 副作用相关包 +│   │   ├── access # 访问控制 +│   │   ├── chart-ui # 图表 UI +│   │   ├── common-ui # 通用 UI +│   │   ├── hooks # 组合式 API +│   │   ├── layouts # 布局 +│   │   └── request # 请求 +│   ├── icons # 图标 +│   ├── locales # 国际化 +│   ├── preferences # 偏好设置 +│   ├── stores # 状态管理 +│   ├── styles # 样式 +│   ├── types # 类型定义 +│   └── utils # 工具 +├── playground # 演示目录 +├── pnpm-lock.yaml # pnpm 锁定文件 +├── pnpm-workspace.yaml # pnpm 工作区配置文件 +├── scripts # 脚本目录 +│   ├── turbo-run # Turbo 运行脚本 +│   └── vsh # VSH 脚本 +├── stylelint.config.mjs # Stylelint 配置文件 +├── turbo.json # Turbo 配置文件 +├── vben-admin.code-workspace # VS Code 工作区配置文件 +└── vitest.config.ts # Vite 配置文件 +``` diff --git a/internal/tsconfig/base.json b/internal/tsconfig/base.json index 82e35f31..1e45a784 100644 --- a/internal/tsconfig/base.json +++ b/internal/tsconfig/base.json @@ -13,7 +13,6 @@ "moduleResolution": "node", "resolveJsonModule": true, - "allowImportingTsExtensions": true, "strict": true, "strictNullChecks": true, diff --git a/package.json b/package.json index 338e59a7..be4baaba 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "dev:antd": "pnpm -F @vben/web-antd run dev", "dev:docs": "pnpm -F @vben/docs run dev", "dev:ele": "pnpm -F @vben/web-ele run dev", + "dev:play": "pnpm -F @vben/playground run dev", "dev:naive": "pnpm -F @vben/web-naive run dev", "format": "vsh lint --format", "lint": "vsh lint", diff --git a/packages/@core/base/design/src/css/global.css b/packages/@core/base/design/src/css/global.css index 6646403d..562cafa9 100644 --- a/packages/@core/base/design/src/css/global.css +++ b/packages/@core/base/design/src/css/global.css @@ -35,7 +35,9 @@ min-height: 100vh; /* overflow: overlay; */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } a, diff --git a/packages/@core/base/design/src/design-tokens/default/index.css b/packages/@core/base/design/src/design-tokens/default/index.css index 5b0c985d..bf334175 100644 --- a/packages/@core/base/design/src/design-tokens/default/index.css +++ b/packages/@core/base/design/src/design-tokens/default/index.css @@ -8,7 +8,7 @@ /* 主体区域背景色 */ --background-deep: 210 11.11% 96.47%; - --foreground: 210 6% 21%; + --foreground: 222 84% 5%; /* Background color for */ --card: 0 0% 100%; diff --git a/packages/@core/base/shared/src/constants/vben.ts b/packages/@core/base/shared/src/constants/vben.ts index a7231757..4ae5d1e6 100644 --- a/packages/@core/base/shared/src/constants/vben.ts +++ b/packages/@core/base/shared/src/constants/vben.ts @@ -22,3 +22,5 @@ export const VBEN_PREVIEW_URL = 'https://www.vben.pro'; export const VBEN_ELE_PREVIEW_URL = 'https://ele.vben.pro'; export const VBEN_NAIVE_PREVIEW_URL = 'https://naive.vben.pro'; + +export const VBEN_ANT_PREVIEW_URL = 'https://ant.vben.pro'; diff --git a/packages/effects/common-ui/src/about/about.vue b/packages/effects/common-ui/src/about/about.vue index d9ed88a8..2a1709b5 100644 --- a/packages/effects/common-ui/src/about/about.vue +++ b/packages/effects/common-ui/src/about/about.vue @@ -125,7 +125,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({

{{ title }}

-

+

{{ name }} @@ -139,7 +139,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({

{{ item.title }}
-
+
@@ -159,7 +159,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
{{ item.title }}
-
+
@@ -178,7 +178,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
{{ item.title }}
-
+
diff --git a/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts b/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts index 020c72dc..aef64052 100644 --- a/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts +++ b/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts @@ -100,15 +100,11 @@ export function useTabbar() { watch( () => route.path, () => { - // 这里不能用route，用route时，vue-router会自动将父级meta进行合并 - const routes = router.getRoutes(); - const currentRoute = routes.find((item) => item.path === route.path); - if (currentRoute) { - tabbarStore.addTab({ - ...route, - meta: currentRoute.meta, - } as unknown as RouteLocationNormalizedGeneric); - } + const meta = route.matched?.[route.matched.length - 1]?.meta; + tabbarStore.addTab({ + ...route, + meta: meta || route.meta, + }); }, { immediate: true }, ); diff --git a/playground/.env b/playground/.env new file mode 100644 index 00000000..87821d87 --- /dev/null +++ b/playground/.env @@ -0,0 +1,5 @@ +# 应用标题 +VITE_APP_TITLE=Vben Admin + +# 应用命名空间，用于缓存、store等功能的前缀，确保隔离 +VITE_APP_NAMESPACE=vben-web-antd diff --git a/playground/.env.analyze b/playground/.env.analyze new file mode 100644 index 00000000..ffafa8dd --- /dev/null +++ b/playground/.env.analyze @@ -0,0 +1,7 @@ +# public path +VITE_BASE=/ + +# Basic interface address SPA +VITE_GLOB_API_URL=/api + +VITE_VISUALIZER=true diff --git a/playground/.env.development b/playground/.env.development new file mode 100644 index 00000000..dcf361e7 --- /dev/null +++ b/playground/.env.development @@ -0,0 +1,16 @@ +# 端口号 +VITE_PORT=5555 + +VITE_BASE=/ + +# 接口地址 +VITE_GLOB_API_URL=/api + +# 是否开启 Nitro Mock服务，true 为开启，false 为关闭 +VITE_NITRO_MOCK=true + +# 是否打开 devtools，true 为打开，false 为关闭 +VITE_DEVTOOLS=false + +# 是否注入全局loading +VITE_INJECT_APP_LOADING=true diff --git a/playground/.env.production b/playground/.env.production new file mode 100644 index 00000000..37947069 --- /dev/null +++ b/playground/.env.production @@ -0,0 +1,16 @@ +VITE_BASE=/ + +# 接口地址 +VITE_GLOB_API_URL=https://mock-napi.vben.pro/api + +# 是否开启压缩，可以设置为 none, brotli, gzip +VITE_COMPRESS=none + +# 是否开启 PWA +VITE_PWA=false + +# vue-router 的模式 +VITE_ROUTER_HISTORY=hash + +# 是否注入全局loading +VITE_INJECT_APP_LOADING=true diff --git a/playground/index.html b/playground/index.html new file mode 100644 index 00000000..ca532699 --- /dev/null +++ b/playground/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + <%= VITE_APP_TITLE %> + + + + +
+ + + diff --git a/playground/package.json b/playground/package.json new file mode 100644 index 00000000..03413e1d --- /dev/null +++ b/playground/package.json @@ -0,0 +1,50 @@ +{ + "name": "@vben/playground", + "version": "5.0.1", + "homepage": "https://vben.pro", + "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", + "repository": { + "type": "git", + "url": "git+https://github.com/vbenjs/vue-vben-admin.git", + "directory": "playground" + }, + "license": "MIT", + "author": { + "name": "vben", + "email": "ann.vben@gmail.com", + "url": "https://github.com/anncwb" + }, + "type": "module", + "scripts": { + "build": "pnpm vite build --mode production", + "build:analyze": "pnpm vite build --mode analyze", + "dev": "pnpm vite --mode development", + "preview": "vite preview", + "typecheck": "vue-tsc --noEmit --skipLibCheck" + }, + "imports": { + "#/*": "./src/*" + }, + "dependencies": { + "@vben/access": "workspace:*", + "@vben/chart-ui": "workspace:*", + "@vben/common-ui": "workspace:*", + "@vben/constants": "workspace:*", + "@vben/hooks": "workspace:*", + "@vben/icons": "workspace:*", + "@vben/layouts": "workspace:*", + "@vben/locales": "workspace:*", + "@vben/preferences": "workspace:*", + "@vben/request": "workspace:*", + "@vben/stores": "workspace:*", + "@vben/styles": "workspace:*", + "@vben/types": "workspace:*", + "@vben/utils": "workspace:*", + "@vueuse/core": "^10.11.1", + "ant-design-vue": "^4.2.3", + "dayjs": "^1.11.12", + "pinia": "2.2.1", + "vue": "^3.4.37", + "vue-router": "^4.4.3" + } +} diff --git a/playground/postcss.config.mjs b/playground/postcss.config.mjs new file mode 100644 index 00000000..3d807045 --- /dev/null +++ b/playground/postcss.config.mjs @@ -0,0 +1 @@ +export { default } from '@vben/tailwind-config/postcss'; diff --git a/playground/public/favicon.ico b/playground/public/favicon.ico new file mode 100644 index 00000000..fcf9818e Binary files /dev/null and b/playground/public/favicon.ico differ diff --git a/playground/src/api/core/auth.ts b/playground/src/api/core/auth.ts new file mode 100644 index 00000000..548e9dc9 --- /dev/null +++ b/playground/src/api/core/auth.ts @@ -0,0 +1,33 @@ +import { requestClient } from '#/api/request'; + +export namespace AuthApi { + /** 登录接口参数 */ + export interface LoginParams { + password: string; + username: string; + } + + /** 登录接口返回值 */ + export interface LoginResult { + accessToken: string; + desc: string; + realName: string; + refreshToken: string; + userId: string; + username: string; + } +} + +/** + * 登录 + */ +export async function loginApi(data: AuthApi.LoginParams) { + return requestClient.post('/auth/login', data); +} + +/** + * 获取用户权限码 + */ +export async function getAccessCodesApi() { + return requestClient.get('/auth/codes'); +} diff --git a/playground/src/api/core/index.ts b/playground/src/api/core/index.ts new file mode 100644 index 00000000..28a5aef4 --- /dev/null +++ b/playground/src/api/core/index.ts @@ -0,0 +1,3 @@ +export * from './auth'; +export * from './menu'; +export * from './user'; diff --git a/playground/src/api/core/menu.ts b/playground/src/api/core/menu.ts new file mode 100644 index 00000000..9ef60b11 --- /dev/null +++ b/playground/src/api/core/menu.ts @@ -0,0 +1,10 @@ +import type { RouteRecordStringComponent } from '@vben/types'; + +import { requestClient } from '#/api/request'; + +/** + * 获取用户所有菜单 + */ +export async function getAllMenusApi() { + return requestClient.get('/menu/all'); +} diff --git a/playground/src/api/core/user.ts b/playground/src/api/core/user.ts new file mode 100644 index 00000000..7e28ea84 --- /dev/null +++ b/playground/src/api/core/user.ts @@ -0,0 +1,10 @@ +import type { UserInfo } from '@vben/types'; + +import { requestClient } from '#/api/request'; + +/** + * 获取用户信息 + */ +export async function getUserInfoApi() { + return requestClient.get('/user/info'); +} diff --git a/apps/web-antd/src/api/demos/index.ts b/playground/src/api/demos/index.ts similarity index 100% rename from apps/web-antd/src/api/demos/index.ts rename to playground/src/api/demos/index.ts diff --git a/apps/web-antd/src/api/demos/status.ts b/playground/src/api/demos/status.ts similarity index 100% rename from apps/web-antd/src/api/demos/status.ts rename to playground/src/api/demos/status.ts diff --git a/playground/src/api/index.ts b/playground/src/api/index.ts new file mode 100644 index 00000000..2b42e898 --- /dev/null +++ b/playground/src/api/index.ts @@ -0,0 +1,2 @@ +export * from './core'; +export * from './demos'; diff --git a/playground/src/api/request.ts b/playground/src/api/request.ts new file mode 100644 index 00000000..19b0e250 --- /dev/null +++ b/playground/src/api/request.ts @@ -0,0 +1,67 @@ +/** + * 该文件可自行根据业务逻辑进行调整 + */ +import type { HttpResponse } from '@vben/request'; + +import { useAppConfig } from '@vben/hooks'; +import { preferences } from '@vben/preferences'; +import { RequestClient } from '@vben/request'; +import { useAccessStore } from '@vben/stores'; + +import { message } from 'ant-design-vue'; + +import { useAuthStore } from '#/store'; + +const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD); + +function createRequestClient(baseURL: string) { + const client = new RequestClient({ + baseURL, + // 为每个请求携带 Authorization + makeAuthorization: () => { + return { + // 默认 + key: 'Authorization', + tokenHandler: () => { + const accessStore = useAccessStore(); + return { + refreshToken: `${accessStore.refreshToken}`, + token: `${accessStore.accessToken}`, + }; + }, + unAuthorizedHandler: async () => { + const accessStore = useAccessStore(); + const authStore = useAuthStore(); + accessStore.setAccessToken(null); + + if (preferences.app.loginExpiredMode === 'modal') { + accessStore.setLoginExpired(true); + } else { + // 退出登录 + await authStore.logout(); + } + }, + }; + }, + makeErrorMessage: (msg) => message.error(msg), + + makeRequestHeaders: () => { + return { + // 为每个请求携带 Accept-Language + 'Accept-Language': preferences.app.locale, + }; + }, + }); + client.addResponseInterceptor((response) => { + const { data: responseData, status } = response; + + const { code, data, message: msg } = responseData; + if (status >= 200 && status < 400 && code === 0) { + return data; + } + throw new Error(`Error ${status}: ${msg}`); + }); + return client; +} + +export const requestClient = createRequestClient(apiURL); diff --git a/playground/src/app.vue b/playground/src/app.vue new file mode 100644 index 00000000..bbaccce1 --- /dev/null +++ b/playground/src/app.vue @@ -0,0 +1,39 @@ + + + diff --git a/playground/src/bootstrap.ts b/playground/src/bootstrap.ts new file mode 100644 index 00000000..1be9bbe0 --- /dev/null +++ b/playground/src/bootstrap.ts @@ -0,0 +1,31 @@ +import { createApp } from 'vue'; + +import { registerAccessDirective } from '@vben/access'; +import { initStores } from '@vben/stores'; +import '@vben/styles'; +import '@vben/styles/antd'; + +import { setupI18n } from '#/locales'; + +import App from './app.vue'; +import { router } from './router'; + +async function bootstrap(namespace: string) { + const app = createApp(App); + + // 国际化 i18n 配置 + await setupI18n(app); + + // 配置 pinia-tore + await initStores(app, { namespace }); + + // 安装权限指令 + registerAccessDirective(app); + + // 配置路由及路由守卫 + app.use(router); + + app.mount('#app'); +} + +export { bootstrap }; diff --git a/playground/src/layouts/basic.vue b/playground/src/layouts/basic.vue new file mode 100644 index 00000000..630d8bdd --- /dev/null +++ b/playground/src/layouts/basic.vue @@ -0,0 +1,154 @@ + + + diff --git a/playground/src/layouts/index.ts b/playground/src/layouts/index.ts new file mode 100644 index 00000000..23d79d6e --- /dev/null +++ b/playground/src/layouts/index.ts @@ -0,0 +1,8 @@ +const BasicLayout = () => import('./basic.vue'); + +const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView); + +const AuthPageLayout = () => + import('@vben/layouts').then((m) => m.AuthPageLayout); + +export { AuthPageLayout, BasicLayout, IFrameView }; diff --git a/playground/src/locales/README.md b/playground/src/locales/README.md new file mode 100644 index 00000000..7b451032 --- /dev/null +++ b/playground/src/locales/README.md @@ -0,0 +1,3 @@ +# locale + +每个app使用的国际化可能不同，这里用于扩展国际化的功能，例如扩展 dayjs、antd组件库的多语言切换，以及app本身的国际化文件。 diff --git a/playground/src/locales/index.ts b/playground/src/locales/index.ts new file mode 100644 index 00000000..4ee7511b --- /dev/null +++ b/playground/src/locales/index.ts @@ -0,0 +1,94 @@ +import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales'; +import type { Locale } from 'ant-design-vue/es/locale'; + +import type { App } from 'vue'; +import { ref } from 'vue'; + +import { $t, setupI18n as coreSetup, loadLocalesMap } from '@vben/locales'; +import { preferences } from '@vben/preferences'; + +import antdEnLocale from 'ant-design-vue/es/locale/en_US'; +import antdDefaultLocale from 'ant-design-vue/es/locale/zh_CN'; +import dayjs from 'dayjs'; + +const antdLocale = ref(antdDefaultLocale); + +const modules = import.meta.glob('./langs/*.json'); + +const localesMap = loadLocalesMap(modules); + +/** + * 加载应用特有的语言包 + * 这里也可以改造为从服务端获取翻译数据 + * @param lang + */ +async function loadMessages(lang: SupportedLanguagesType) { + const [appLocaleMessages] = await Promise.all([ + localesMap[lang]?.(), + loadThirdPartyMessage(lang), + ]); + return appLocaleMessages?.default; +} + +/** + * 加载第三方组件库的语言包 + * @param lang + */ +async function loadThirdPartyMessage(lang: SupportedLanguagesType) { + await Promise.all([loadAntdLocale(lang), loadDayjsLocale(lang)]); +} + +/** + * 加载dayjs的语言包 + * @param lang + */ +async function loadDayjsLocale(lang: SupportedLanguagesType) { + let locale; + switch (lang) { + case 'zh-CN': { + locale = await import('dayjs/locale/zh-cn'); + break; + } + case 'en-US': { + locale = await import('dayjs/locale/en'); + break; + } + // 默认使用英语 + default: { + locale = await import('dayjs/locale/en'); + } + } + if (locale) { + dayjs.locale(locale); + } else { + console.error(`Failed to load dayjs locale for ${lang}`); + } +} + +/** + * 加载antd的语言包 + * @param lang + */ +async function loadAntdLocale(lang: SupportedLanguagesType) { + switch (lang) { + case 'zh-CN': { + antdLocale.value = antdDefaultLocale; + break; + } + case 'en-US': { + antdLocale.value = antdEnLocale; + break; + } + } +} + +async function setupI18n(app: App, options: LocaleSetupOptions = {}) { + await coreSetup(app, { + defaultLocale: preferences.app.locale, + loadMessages, + missingWarn: !import.meta.env.PROD, + ...options, + }); +} + +export { $t, antdLocale, loadMessages, setupI18n }; diff --git a/playground/src/locales/langs/en-US.json b/playground/src/locales/langs/en-US.json new file mode 100644 index 00000000..13179fd2 --- /dev/null +++ b/playground/src/locales/langs/en-US.json @@ -0,0 +1,67 @@ +{ + "page": { + "demos": { + "title": "Demos", + "access": { + "frontendPermissions": "Frontend Permissions", + "backendPermissions": "Backend Permissions", + "pageAccess": "Page Access", + "buttonControl": "Button Control", + "menuVisible403": "Menu Visible(403)", + "superVisible": "Visible to Super", + "adminVisible": "Visible to Admin", + "userVisible": "Visible to User" + }, + "nested": { + "title": "Nested Menu", + "menu1": "Menu 1", + "menu2": "Menu 2", + "menu2_1": "Menu 2-1", + "menu3": "Menu 3", + "menu3_1": "Menu 3-1", + "menu3_2": "Menu 3-2", + "menu3_2_1": "Menu 3-2-1" + }, + "outside": { + "title": "External Pages", + "embedded": "Embedded", + "externalLink": "External Link" + }, + "badge": { + "title": "Menu Badge", + "dot": "Dot Badge", + "text": "Text Badge", + "color": "Badge Color" + }, + "activeIcon": { + "title": "Active Menu Icon", + "children": "Children Active Icon" + }, + "fallback": { + "title": "Fallback Page" + }, + "features": { + "title": "Features", + "hideChildrenInMenu": "Hide Menu Children", + "loginExpired": "Login Expired", + "icons": "Icons", + "watermark": "Watermark", + "tabs": "Tabs", + "tabDetail": "Tab Detail Page" + }, + "breadcrumb": { + "navigation": "Breadcrumb Navigation", + "lateral": "Lateral Mode", + "lateralDetail": "Lateral Mode Detail", + "level": "Level Mode", + "levelDetail": "Level Mode Detail" + } + }, + "examples": { + "title": "Examples", + "ellipsis": { + "title": "EllipsisText" + } + } + } +} diff --git a/playground/src/locales/langs/zh-CN.json b/playground/src/locales/langs/zh-CN.json new file mode 100644 index 00000000..86fbcabc --- /dev/null +++ b/playground/src/locales/langs/zh-CN.json @@ -0,0 +1,67 @@ +{ + "page": { + "demos": { + "title": "演示", + "access": { + "frontendPermissions": "前端权限", + "backendPermissions": "后端权限", + "pageAccess": "页面访问", + "buttonControl": "按钮控制", + "menuVisible403": "菜单可见(403)", + "superVisible": "Super 可见", + "adminVisible": "Admin 可见", + "userVisible": "User 可见" + }, + "nested": { + "title": "嵌套菜单", + "menu1": "菜单 1", + "menu2": "菜单 2", + "menu2_1": "菜单 2-1", + "menu3": "菜单 3", + "menu3_1": "菜单 3-1", + "menu3_2": "菜单 3-2", + "menu3_2_1": "菜单 3-2-1" + }, + "outside": { + "title": "外部页面", + "embedded": "内嵌", + "externalLink": "外链" + }, + "badge": { + "title": "菜单徽标", + "dot": "点徽标", + "text": "文本徽标", + "color": "徽标颜色" + }, + "activeIcon": { + "title": "菜单激活图标", + "children": "子级激活图标" + }, + "fallback": { + "title": "缺省页" + }, + "features": { + "title": "功能", + "hideChildrenInMenu": "隐藏子菜单", + "loginExpired": "登录过期", + "icons": "图标", + "watermark": "水印", + "tabs": "标签页", + "tabDetail": "标签详情页" + }, + "breadcrumb": { + "navigation": "面包屑导航", + "lateral": "平级模式", + "level": "层级模式", + "levelDetail": "层级模式详情", + "lateralDetail": "平级模式详情" + } + }, + "examples": { + "title": "示例", + "ellipsis": { + "title": "文本省略" + } + } + } +} diff --git a/playground/src/main.ts b/playground/src/main.ts new file mode 100644 index 00000000..5d728a02 --- /dev/null +++ b/playground/src/main.ts @@ -0,0 +1,31 @@ +import { initPreferences } from '@vben/preferences'; +import { unmountGlobalLoading } from '@vben/utils'; + +import { overridesPreferences } from './preferences'; + +/** + * 应用初始化完成之后再进行页面加载渲染 + */ +async function initApplication() { + // name用于指定项目唯一标识 + // 用于区分不同项目的偏好设置以及存储数据的key前缀以及其他一些需要隔离的数据 + const env = import.meta.env.PROD ? 'prod' : 'dev'; + const appVersion = import.meta.env.VITE_APP_VERSION; + const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${appVersion}-${env}`; + + // app偏好设置初始化 + await initPreferences({ + namespace, + overrides: overridesPreferences, + }); + + // 启动应用并挂载 + // vue应用主要逻辑及视图 + const { bootstrap } = await import('./bootstrap'); + await bootstrap(namespace); + + // 移除并销毁loading + unmountGlobalLoading(); +} + +initApplication(); diff --git a/playground/src/preferences.ts b/playground/src/preferences.ts new file mode 100644 index 00000000..63edb3a9 --- /dev/null +++ b/playground/src/preferences.ts @@ -0,0 +1,12 @@ +import { defineOverridesPreferences } from '@vben/preferences'; + +/** + * @description 项目配置文件 + * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置 + */ +export const overridesPreferences = defineOverridesPreferences({ + // overrides + app: { + name: import.meta.env.VITE_APP_TITLE, + }, +}); diff --git a/playground/src/router/access.ts b/playground/src/router/access.ts new file mode 100644 index 00000000..3a48be23 --- /dev/null +++ b/playground/src/router/access.ts @@ -0,0 +1,42 @@ +import type { + ComponentRecordType, + GenerateMenuAndRoutesOptions, +} from '@vben/types'; + +import { generateAccessible } from '@vben/access'; +import { preferences } from '@vben/preferences'; + +import { message } from 'ant-design-vue'; + +import { getAllMenusApi } from '#/api'; +import { BasicLayout, IFrameView } from '#/layouts'; +import { $t } from '#/locales'; + +const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue'); + +async function generateAccess(options: GenerateMenuAndRoutesOptions) { + const pageMap: ComponentRecordType = import.meta.glob('../views/**/*.vue'); + + const layoutMap: ComponentRecordType = { + BasicLayout, + IFrameView, + }; + + return await generateAccessible(preferences.app.accessMode, { + ...options, + fetchMenuListAsync: async () => { + message.loading({ + content: `${$t('common.loadingMenu')}...`, + duration: 1.5, + }); + return await getAllMenusApi(); + }, + // 可以指定没有权限跳转403页面 + forbiddenComponent, + // 如果 route.meta.menuVisibleWithForbidden = true + layoutMap, + pageMap, + }); +} + +export { generateAccess }; diff --git a/playground/src/router/guard.ts b/playground/src/router/guard.ts new file mode 100644 index 00000000..f6b79f06 --- /dev/null +++ b/playground/src/router/guard.ts @@ -0,0 +1,138 @@ +import type { Router } from 'vue-router'; + +import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants'; +import { preferences } from '@vben/preferences'; +import { useAccessStore, useUserStore } from '@vben/stores'; +import { startProgress, stopProgress } from '@vben/utils'; + +import { useTitle } from '@vueuse/core'; + +import { $t } from '#/locales'; +import { coreRouteNames, dynamicRoutes } from '#/router/routes'; +import { useAuthStore } from '#/store'; + +import { generateAccess } from './access'; + +/** + * 通用守卫配置 + * @param router + */ +function setupCommonGuard(router: Router) { + // 记录已经加载的页面 + const loadedPaths = new Set(); + + router.beforeEach(async (to) => { + to.meta.loaded = loadedPaths.has(to.path); + + // 页面加载进度条 + if (!to.meta.loaded && preferences.transition.progress) { + startProgress(); + } + return true; + }); + + router.afterEach((to) => { + // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行 + + if (preferences.tabbar.enable) { + loadedPaths.add(to.path); + } + + // 关闭页面加载进度条 + if (preferences.transition.progress) { + stopProgress(); + } + + // 动态修改标题 + if (preferences.app.dynamicTitle) { + const { title } = to.meta; + // useTitle(`${$t(title)} - ${preferences.app.name}`); + useTitle(`${$t(title)} - ${preferences.app.name}`); + } + }); +} + +/** + * 权限访问守卫配置 + * @param router + */ +function setupAccessGuard(router: Router) { + router.beforeEach(async (to, from) => { + const accessStore = useAccessStore(); + const userStore = useUserStore(); + const authStore = useAuthStore(); + + // 基本路由，这些路由不需要进入权限拦截 + if (coreRouteNames.includes(to.name as string)) { + if (to.path === LOGIN_PATH && accessStore.accessToken) { + return decodeURIComponent( + (to.query?.redirect as string) || DEFAULT_HOME_PATH, + ); + } + return true; + } + + // accessToken 检查 + if (!accessStore.accessToken) { + // 明确声明忽略权限访问权限，则可以访问 + if (to.meta.ignoreAccess) { + return true; + } + + // 没有访问权限，跳转登录页面 + if (to.fullPath !== LOGIN_PATH) { + return { + path: LOGIN_PATH, + // 如不需要，直接删除 query + query: { redirect: encodeURIComponent(to.fullPath) }, + // 携带当前跳转的页面，登录后重新跳转该页面 + replace: true, + }; + } + return to; + } + + const accessRoutes = accessStore.accessRoutes; + + // 是否已经生成过动态路由 + if (accessRoutes && accessRoutes.length > 0) { + return true; + } + + // 生成路由表 + // 当前登录用户拥有的角色标识列表 + const userInfo = userStore.userInfo || (await authStore.fetchUserInfo()); + const userRoles = userInfo.roles ?? []; + + // 生成菜单和路由 + const { accessibleMenus, accessibleRoutes } = await generateAccess({ + roles: userRoles, + router, + // 则会在菜单中显示，但是访问会被重定向到403 + routes: dynamicRoutes, + }); + + // 保存菜单信息和路由信息 + accessStore.setAccessMenus(accessibleMenus); + accessStore.setAccessRoutes(accessibleRoutes); + const redirectPath = (from.query.redirect ?? to.fullPath) as string; + + return { + ...router.resolve(decodeURIComponent(redirectPath)), + replace: true, + }; + }); +} + +/** + * 项目守卫配置 + * @param router + */ +function createRouterGuard(router: Router) { + /** 通用 */ + setupCommonGuard(router); + /** 权限访问 */ + setupAccessGuard(router); +} + +export { createRouterGuard }; diff --git a/playground/src/router/index.ts b/playground/src/router/index.ts new file mode 100644 index 00000000..313b372b --- /dev/null +++ b/playground/src/router/index.ts @@ -0,0 +1,32 @@ +import { + createRouter, + createWebHashHistory, + createWebHistory, +} from 'vue-router'; + +import { resetStaticRoutes } from '@vben/utils'; + +import { createRouterGuard } from './guard'; +import { routes } from './routes'; + +/** + * @zh_CN 创建vue-router实例 + */ +const router = createRouter({ + history: + import.meta.env.VITE_ROUTER_HISTORY === 'hash' + ? createWebHashHistory(import.meta.env.VITE_BASE) + : createWebHistory(import.meta.env.VITE_BASE), + // 应该添加到路由的初始路由列表。 + routes, + scrollBehavior: () => ({ left: 0, top: 0 }), + // 是否应该禁止尾部斜杠。 + // strict: true, +}); + +const resetRoutes = () => resetStaticRoutes(router, routes); + +// 创建路由守卫 +createRouterGuard(router); + +export { resetRoutes, router }; diff --git a/playground/src/router/routes/core.ts b/playground/src/router/routes/core.ts new file mode 100644 index 00000000..f793a57e --- /dev/null +++ b/playground/src/router/routes/core.ts @@ -0,0 +1,86 @@ +import type { RouteRecordRaw } from 'vue-router'; + +import { DEFAULT_HOME_PATH } from '@vben/constants'; + +import { AuthPageLayout } from '#/layouts'; +import { $t } from '#/locales'; +import Login from '#/views/_core/authentication/login.vue'; + +/** 全局404页面 */ +const fallbackNotFoundRoute: RouteRecordRaw = { + component: () => import('#/views/_core/fallback/not-found.vue'), + meta: { + hideInBreadcrumb: true, + hideInMenu: true, + hideInTab: true, + title: '404', + }, + name: 'FallbackNotFound', + path: '/:path(.*)*', +}; + +/** 基本路由，这些路由是必须存在的 */ +const coreRoutes: RouteRecordRaw[] = [ + { + meta: { + title: 'Root', + }, + name: 'Root', + path: '/', + redirect: DEFAULT_HOME_PATH, + }, + { + component: AuthPageLayout, + meta: { + title: 'Authentication', + }, + name: 'Authentication', + path: '/auth', + children: [ + { + name: 'Login', + path: 'login', + component: Login, + meta: { + title: $t('page.core.login'), + }, + }, + { + name: 'CodeLogin', + path: 'code-login', + component: () => import('#/views/_core/authentication/code-login.vue'), + meta: { + title: $t('page.core.codeLogin'), + }, + }, + { + name: 'QrCodeLogin', + path: 'qrcode-login', + component: () => + import('#/views/_core/authentication/qrcode-login.vue'), + meta: { + title: $t('page.core.qrcodeLogin'), + }, + }, + { + name: 'ForgetPassword', + path: 'forget-password', + component: () => + import('#/views/_core/authentication/forget-password.vue'), + meta: { + title: $t('page.core.forgetPassword'), + }, + }, + { + name: 'Register', + path: 'register', + component: () => import('#/views/_core/authentication/register.vue'), + meta: { + title: $t('page.core.register'), + }, + }, + ], + }, +]; + +export { coreRoutes, fallbackNotFoundRoute }; diff --git a/playground/src/router/routes/index.ts b/playground/src/router/routes/index.ts new file mode 100644 index 00000000..78da5436 --- /dev/null +++ b/playground/src/router/routes/index.ts @@ -0,0 +1,31 @@ +import type { RouteRecordRaw } from 'vue-router'; + +import { mergeRouteModules, traverseTreeValues } from '@vben/utils'; + +import { coreRoutes, fallbackNotFoundRoute } from './core'; + +const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', { + eager: true, +}); + +// 有需要可以自行打开注释，并创建文件夹 +// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true }); + +/** 动态路由 */ +const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles); + +/** 静态路由列表，访问这些页面可以不需要权限 */ +// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles); +const staticRoutes: RouteRecordRaw[] = []; + +/** 路由列表，由基本路由+静态路由组成 */ +const routes: RouteRecordRaw[] = [ + ...coreRoutes, + ...staticRoutes, + fallbackNotFoundRoute, +]; + +/** 基本路由列表，这些路由不需要进入权限拦截 */ +const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name); + +export { coreRouteNames, dynamicRoutes, routes }; diff --git a/playground/src/router/routes/modules/dashboard.ts b/playground/src/router/routes/modules/dashboard.ts new file mode 100644 index 00000000..a8cdb05d --- /dev/null +++ b/playground/src/router/routes/modules/dashboard.ts @@ -0,0 +1,39 @@ +import type { RouteRecordRaw } from 'vue-router'; + +import { BasicLayout } from '#/layouts'; +import { $t } from '#/locales'; + +const routes: RouteRecordRaw[] = [ + { + component: BasicLayout, + meta: { + icon: 'lucide:layout-dashboard', + order: -1, + title: $t('page.dashboard.title'), + }, + name: 'Dashboard', + path: '/', + children: [ + { + name: 'Analytics', + path: '/analytics', + component: () => import('#/views/dashboard/analytics/index.vue'), + meta: { + affixTab: true, + icon: 'lucide:area-chart', + title: $t('page.dashboard.analytics'), + }, + }, + { + name: 'Workspace', + path: '/workspace', + component: () => import('#/views/dashboard/workspace/index.vue'), + meta: { + title: $t('page.dashboard.workspace'), + }, + }, + ], + }, +]; + +export default routes; diff --git a/playground/src/router/routes/modules/demos.ts b/playground/src/router/routes/modules/demos.ts new file mode 100644 index 00000000..ad88a548 --- /dev/null +++ b/playground/src/router/routes/modules/demos.ts @@ -0,0 +1,494 @@ +import type { RouteRecordRaw } from 'vue-router'; + +import { BasicLayout, IFrameView } from '#/layouts'; +import { $t } from '#/locales'; + +const routes: RouteRecordRaw[] = [ + { + component: BasicLayout, + meta: { + icon: 'ic:baseline-view-in-ar', + keepAlive: true, + order: 1000, + title: $t('page.demos.title'), + }, + name: 'Demos', + path: '/demos', + children: [ + // 权限控制 + { + meta: { + icon: 'mdi:shield-key-outline', + title: $t('page.demos.access.frontendPermissions'), + }, + name: 'AccessDemos', + path: '/demos/access', + children: [ + { + name: 'AccessPageControlDemo', + path: '/demos/access/page-control', + component: () => import('#/views/demos/access/index.vue'), + meta: { + icon: 'mdi:page-previous-outline', + title: $t('page.demos.access.pageAccess'), + }, + }, + { + name: 'AccessButtonControlDemo', + path: '/demos/access/button-control', + component: () => import('#/views/demos/access/button-control.vue'), + meta: { + icon: 'mdi:button-cursor', + title: $t('page.demos.access.buttonControl'), + }, + }, + { + name: 'AccessMenuVisible403Demo', + path: '/demos/access/menu-visible-403', + component: () => + import('#/views/demos/access/menu-visible-403.vue'), + meta: { + authority: ['no-body'], + icon: 'mdi:button-cursor', + menuVisibleWithForbidden: true, + title: $t('page.demos.access.menuVisible403'), + }, + }, + { + name: 'AccessSuperVisibleDemo', + path: '/demos/access/super-visible', + component: () => import('#/views/demos/access/super-visible.vue'), + meta: { + authority: ['super'], + icon: 'mdi:button-cursor', + title: $t('page.demos.access.superVisible'), + }, + }, + { + name: 'AccessAdminVisibleDemo', + path: '/demos/access/admin-visible', + component: () => import('#/views/demos/access/admin-visible.vue'), + meta: { + authority: ['admin'], + icon: 'mdi:button-cursor', + title: $t('page.demos.access.adminVisible'), + }, + }, + { + name: 'AccessUserVisibleDemo', + path: '/demos/access/user-visible', + component: () => import('#/views/demos/access/user-visible.vue'), + meta: { + authority: ['user'], + icon: 'mdi:button-cursor', + title: $t('page.demos.access.userVisible'), + }, + }, + ], + }, + // 功能 + { + meta: { + icon: 'mdi:feature-highlight', + title: $t('page.demos.features.title'), + }, + name: 'FeaturesDemos', + path: '/demos/features', + children: [ + { + name: 'LoginExpiredDemo', + path: '/demos/features/login-expired', + component: () => + import('#/views/demos/features/login-expired/index.vue'), + meta: { + icon: 'mdi:encryption-expiration', + title: $t('page.demos.features.loginExpired'), + }, + }, + { + name: 'IconsDemo', + path: '/demos/features/icons', + component: () => import('#/views/demos/features/icons/index.vue'), + meta: { + title: $t('page.demos.features.icons'), + }, + }, + { + name: 'WatermarkDemo', + path: '/demos/features/watermark', + component: () => + import('#/views/demos/features/watermark/index.vue'), + meta: { + title: $t('page.demos.features.watermark'), + }, + }, + { + name: 'FeatureTabsDemo', + path: '/demos/features/tabs', + component: () => import('#/views/demos/features/tabs/index.vue'), + meta: { + icon: 'lucide:app-window', + title: $t('page.demos.features.tabs'), + }, + }, + { + name: 'FeatureTabDetailDemo', + path: '/demos/features/tabs/detail/:id', + component: () => + import('#/views/demos/features/tabs/tab-detail.vue'), + meta: { + activePath: '/demos/features/tabs', + hideInMenu: true, + maxNumOfOpenTab: 3, + title: $t('page.demos.features.tabDetail'), + }, + }, + { + name: 'HideChildrenInMenuParentDemo', + path: '/demos/features/hide-menu-children', + component: () => + import('#/views/demos/features/hide-menu-children/parent.vue'), + meta: { + hideChildrenInMenu: true, + icon: 'ic:round-menu', + title: $t('page.demos.features.hideChildrenInMenu'), + }, + children: [ + { + name: 'HideChildrenInMenuChildrenDemo', + path: '/demos/features/hide-menu-children/children', + component: () => + import( + '#/views/demos/features/hide-menu-children/children.vue' + ), + meta: { title: 'HideChildrenInMenuChildrenDemo' }, + }, + ], + }, + ], + }, + // 面包屑导航 + { + name: 'BreadcrumbDemos', + path: '/demos/breadcrumb', + meta: { + icon: 'lucide:navigation', + title: $t('page.demos.breadcrumb.navigation'), + }, + children: [ + { + name: 'BreadcrumbLateralDemo', + path: '/demos/breadcrumb/lateral', + component: () => import('#/views/demos/breadcrumb/lateral.vue'), + meta: { + icon: 'lucide:navigation', + title: $t('page.demos.breadcrumb.lateral'), + }, + }, + { + name: 'BreadcrumbLateralDetailDemo', + path: '/demos/breadcrumb/lateral-detail', + component: () => + import('#/views/demos/breadcrumb/lateral-detail.vue'), + meta: { + activePath: '/demos/breadcrumb/lateral', + hideInMenu: true, + title: $t('page.demos.breadcrumb.lateralDetail'), + }, + }, + { + name: 'BreadcrumbLevelDemo', + path: '/demos/breadcrumb/level', + meta: { + icon: 'lucide:navigation', + title: $t('page.demos.breadcrumb.level'), + }, + children: [ + { + name: 'BreadcrumbLevelDetailDemo', + path: '/demos/breadcrumb/level/detail', + component: () => + import('#/views/demos/breadcrumb/level-detail.vue'), + meta: { + title: $t('page.demos.breadcrumb.levelDetail'), + }, + }, + ], + }, + ], + }, + // 缺省页 + { + meta: { + icon: 'mdi:lightbulb-error-outline', + title: $t('page.demos.fallback.title'), + }, + name: 'FallbackDemos', + path: '/demos/fallback', + children: [ + { + name: 'Fallback403Demo', + path: '/demos/fallback/403', + component: () => import('#/views/_core/fallback/forbidden.vue'), + meta: { + icon: 'mdi:do-not-disturb-alt', + title: '403', + }, + }, + { + name: 'Fallback404Demo', + path: '/demos/fallback/404', + component: () => import('#/views/_core/fallback/not-found.vue'), + meta: { + icon: 'mdi:table-off', + title: '404', + }, + }, + { + name: 'Fallback500Demo', + path: '/demos/fallback/500', + component: () => + import('#/views/_core/fallback/internal-error.vue'), + meta: { + icon: 'mdi:server-network-off', + title: '500', + }, + }, + { + name: 'FallbackOfflineDemo', + path: '/demos/fallback/offline', + component: () => import('#/views/_core/fallback/offline.vue'), + meta: { + icon: 'mdi:offline', + title: $t('fallback.offline'), + }, + }, + ], + }, + // 菜单徽标 + { + meta: { + badgeType: 'dot', + badgeVariants: 'destructive', + icon: 'lucide:circle-dot', + title: $t('page.demos.badge.title'), + }, + name: 'BadgeDemos', + path: '/demos/badge', + children: [ + { + name: 'BadgeDotDemo', + component: () => import('#/views/demos/badge/index.vue'), + path: '/demos/badge/dot', + meta: { + badgeType: 'dot', + icon: 'lucide:square-dot', + title: $t('page.demos.badge.dot'), + }, + }, + { + name: 'BadgeTextDemo', + component: () => import('#/views/demos/badge/index.vue'), + path: '/demos/badge/text', + meta: { + badge: '10', + icon: 'lucide:square-dot', + title: $t('page.demos.badge.text'), + }, + }, + { + name: 'BadgeColorDemo', + component: () => import('#/views/demos/badge/index.vue'), + path: '/demos/badge/color', + meta: { + badge: 'Hot', + badgeVariants: 'destructive', + icon: 'lucide:square-dot', + title: $t('page.demos.badge.color'), + }, + }, + ], + }, + // 菜单激活图标 + { + meta: { + activeIcon: 'fluent-emoji:radioactive', + icon: 'bi:radioactive', + title: $t('page.demos.activeIcon.title'), + }, + name: 'ActiveIconDemos', + path: '/demos/active-icon', + children: [ + { + name: 'ActiveIconDemo', + component: () => import('#/views/demos/active-icon/index.vue'), + path: '/demos/active-icon/children', + meta: { + activeIcon: 'fluent-emoji:radioactive', + icon: 'bi:radioactive', + title: $t('page.demos.activeIcon.children'), + }, + }, + ], + }, + // 外部链接 + { + meta: { + icon: 'ic:round-settings-input-composite', + title: $t('page.demos.outside.title'), + }, + name: 'OutsideDemos', + path: '/demos/outside', + children: [ + { + name: 'IframeDemos', + path: '/demos/outside/iframe', + meta: { + icon: 'mdi:newspaper-variant-outline', + title: $t('page.demos.outside.embedded'), + }, + children: [ + { + name: 'VueDocumentDemo', + path: '/demos/outside/iframe/vue-document', + component: IFrameView, + meta: { + icon: 'logos:vue', + iframeSrc: 'https://cn.vuejs.org/', + keepAlive: true, + title: 'Vue', + }, + }, + { + name: 'TailwindcssDemo', + path: '/demos/outside/iframe/tailwindcss', + component: IFrameView, + meta: { + icon: 'devicon:tailwindcss', + iframeSrc: 'https://tailwindcss.com/', + // keepAlive: true, + title: 'Tailwindcss', + }, + }, + ], + }, + { + name: 'ExternalLinkDemos', + path: '/demos/outside/external-link', + meta: { + icon: 'mdi:newspaper-variant-multiple-outline', + title: $t('page.demos.outside.externalLink'), + }, + children: [ + { + name: 'ViteDemo', + path: '/demos/outside/external-link/vite', + component: IFrameView, + meta: { + icon: 'logos:vitejs', + link: 'https://vitejs.dev/', + title: 'Vite', + }, + }, + { + name: 'VueUseDemo', + path: '/demos/outside/external-link/vue-use', + component: IFrameView, + meta: { + icon: 'logos:vueuse', + link: 'https://vueuse.org', + title: 'VueUse', + }, + }, + ], + }, + ], + }, + // 嵌套菜单 + { + meta: { + icon: 'ic:round-menu', + title: $t('page.demos.nested.title'), + }, + name: 'NestedDemos', + path: '/demos/nested', + children: [ + { + name: 'Menu1Demo', + path: '/demos/nested/menu1', + component: () => import('#/views/demos/nested/menu-1.vue'), + meta: { + icon: 'ic:round-menu', + keepAlive: true, + title: $t('page.demos.nested.menu1'), + }, + }, + { + name: 'Menu2Demo', + path: '/demos/nested/menu2', + meta: { + icon: 'ic:round-menu', + keepAlive: true, + title: $t('page.demos.nested.menu2'), + }, + children: [ + { + name: 'Menu21Demo', + path: '/demos/nested/menu2/menu2-1', + component: () => import('#/views/demos/nested/menu-2-1.vue'), + meta: { + icon: 'ic:round-menu', + keepAlive: true, + title: $t('page.demos.nested.menu2_1'), + }, + }, + ], + }, + { + name: 'Menu3Demo', + path: '/demos/nested/menu3', + meta: { + icon: 'ic:round-menu', + title: $t('page.demos.nested.menu3'), + }, + children: [ + { + name: 'Menu31Demo', + path: 'menu3-1', + component: () => import('#/views/demos/nested/menu-3-1.vue'), + meta: { + icon: 'ic:round-menu', + keepAlive: true, + title: $t('page.demos.nested.menu3_1'), + }, + }, + { + name: 'Menu32Demo', + path: 'menu3-2', + meta: { + icon: 'ic:round-menu', + title: $t('page.demos.nested.menu3_2'), + }, + children: [ + { + name: 'Menu321Demo', + path: '/demos/nested/menu3/menu3-2/menu3-2-1', + component: () => + import('#/views/demos/nested/menu-3-2-1.vue'), + meta: { + icon: 'ic:round-menu', + keepAlive: true, + title: $t('page.demos.nested.menu3_2_1'), + }, + }, + ], + }, + ], + }, + ], + }, + ], + }, +]; + +export default routes; diff --git a/apps/web-antd/src/router/routes/modules/examples.ts b/playground/src/router/routes/modules/examples.ts similarity index 100% rename from apps/web-antd/src/router/routes/modules/examples.ts rename to playground/src/router/routes/modules/examples.ts diff --git a/playground/src/router/routes/modules/vben.ts b/playground/src/router/routes/modules/vben.ts new file mode 100644 index 00000000..4dd75629 --- /dev/null +++ b/playground/src/router/routes/modules/vben.ts @@ -0,0 +1,90 @@ +import type { RouteRecordRaw } from 'vue-router'; + +import { + VBEN_ANT_PREVIEW_URL, + VBEN_DOC_URL, + VBEN_ELE_PREVIEW_URL, + VBEN_GITHUB_URL, + VBEN_LOGO_URL, + VBEN_NAIVE_PREVIEW_URL, +} from '@vben/constants'; + +import { BasicLayout, IFrameView } from '#/layouts'; +import { $t } from '#/locales'; + +const routes: RouteRecordRaw[] = [ + { + component: BasicLayout, + meta: { + badgeType: 'dot', + icon: VBEN_LOGO_URL, + order: 9999, + title: $t('page.vben.title'), + }, + name: 'VbenProject', + path: '/vben-admin', + children: [ + { + name: 'VbenAbout', + path: '/vben-admin/about', + component: () => import('#/views/_core/vben/about/index.vue'), + meta: { + icon: 'lucide:copyright', + title: $t('page.vben.about'), + }, + }, + { + name: 'VbenDocument', + path: '/vben-admin/document', + component: IFrameView, + meta: { + icon: 'lucide:book-open-text', + link: VBEN_DOC_URL, + title: $t('page.vben.document'), + }, + }, + { + name: 'VbenGithub', + path: '/vben-admin/github', + component: IFrameView, + meta: { + icon: 'mdi:github', + link: VBEN_GITHUB_URL, + title: 'Github', + }, + }, + { + name: 'VbenAntdv', + path: '/vben-admin/antdv', + component: IFrameView, + meta: { + badgeType: 'dot', + link: VBEN_ANT_PREVIEW_URL, + title: $t('page.vben.antdv'), + }, + }, + { + name: 'VbenNaive', + path: '/vben-admin/naive', + component: IFrameView, + meta: { + badgeType: 'dot', + link: VBEN_NAIVE_PREVIEW_URL, + title: $t('page.vben.naive-ui'), + }, + }, + { + name: 'VbenElementPlus', + path: '/vben-admin/ele', + component: IFrameView, + meta: { + badgeType: 'dot', + link: VBEN_ELE_PREVIEW_URL, + title: $t('page.vben.element-plus'), + }, + }, + ], + }, +]; + +export default routes; diff --git a/playground/src/store/auth.ts b/playground/src/store/auth.ts new file mode 100644 index 00000000..59a640ca --- /dev/null +++ b/playground/src/store/auth.ts @@ -0,0 +1,111 @@ +import type { LoginAndRegisterParams } from '@vben/common-ui'; +import type { UserInfo } from '@vben/types'; + +import { ref } from 'vue'; +import { useRouter } from 'vue-router'; + +import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants'; +import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores'; + +import { notification } from 'ant-design-vue'; +import { defineStore } from 'pinia'; + +import { getAccessCodesApi, getUserInfoApi, loginApi } from '#/api'; +import { $t } from '#/locales'; + +export const useAuthStore = defineStore('auth', () => { + const accessStore = useAccessStore(); + const userStore = useUserStore(); + const router = useRouter(); + + const loginLoading = ref(false); + + /** + * 异步处理登录操作 + * Asynchronously handle the login process + * @param params 登录表单数据 + */ + async function authLogin( + params: LoginAndRegisterParams, + onSuccess?: () => Promise | void, + ) { + // 异步处理用户登录操作并获取 accessToken + let userInfo: null | UserInfo = null; + try { + loginLoading.value = true; + const { accessToken, refreshToken } = await loginApi(params); + + // 如果成功获取到 accessToken + if (accessToken) { + // 将 accessToken 存储到 accessStore 中 + accessStore.setAccessToken(accessToken); + accessStore.setRefreshToken(refreshToken); + + // 获取用户信息并存储到 accessStore 中 + const [fetchUserInfoResult, accessCodes] = await Promise.all([ + fetchUserInfo(), + getAccessCodesApi(), + ]); + + userInfo = fetchUserInfoResult; + + userStore.setUserInfo(userInfo); + accessStore.setAccessCodes(accessCodes); + + if (accessStore.loginExpired) { + accessStore.setLoginExpired(false); + } else { + onSuccess + ? await onSuccess?.() + : await router.push(userInfo.homePath || DEFAULT_HOME_PATH); + } + + if (userInfo?.realName) { + notification.success({ + description: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`, + duration: 3, + message: $t('authentication.loginSuccess'), + }); + } + } + } finally { + loginLoading.value = false; + } + + return { + userInfo, + }; + } + + async function logout() { + resetAllStores(); + accessStore.setLoginExpired(false); + + // 回登陆页带上当前路由地址 + await router.replace({ + path: LOGIN_PATH, + query: { + redirect: encodeURIComponent(router.currentRoute.value.fullPath), + }, + }); + } + + async function fetchUserInfo() { + let userInfo: null | UserInfo = null; + userInfo = await getUserInfoApi(); + userStore.setUserInfo(userInfo); + return userInfo; + } + + function $reset() { + loginLoading.value = false; + } + + return { + $reset, + authLogin, + fetchUserInfo, + loginLoading, + logout, + }; +}); diff --git a/playground/src/store/index.ts b/playground/src/store/index.ts new file mode 100644 index 00000000..269586ee --- /dev/null +++ b/playground/src/store/index.ts @@ -0,0 +1 @@ +export * from './auth'; diff --git a/playground/src/views/_core/README.md b/playground/src/views/_core/README.md new file mode 100644 index 00000000..8248afe6 --- /dev/null +++ b/playground/src/views/_core/README.md @@ -0,0 +1,3 @@ +# \_core + +此目录包含应用程序正常运行所需的基本视图。这些视图是应用程序布局中使用的视图。 diff --git a/playground/src/views/_core/authentication/code-login.vue b/playground/src/views/_core/authentication/code-login.vue new file mode 100644 index 00000000..36cf50ec --- /dev/null +++ b/playground/src/views/_core/authentication/code-login.vue @@ -0,0 +1,30 @@ + + + diff --git a/playground/src/views/_core/authentication/forget-password.vue b/playground/src/views/_core/authentication/forget-password.vue new file mode 100644 index 00000000..74ccc27e --- /dev/null +++ b/playground/src/views/_core/authentication/forget-password.vue @@ -0,0 +1,23 @@ + + + diff --git a/playground/src/views/_core/authentication/login.vue b/playground/src/views/_core/authentication/login.vue new file mode 100644 index 00000000..3bcdd950 --- /dev/null +++ b/playground/src/views/_core/authentication/login.vue @@ -0,0 +1,18 @@ + + + diff --git a/playground/src/views/_core/authentication/qrcode-login.vue b/playground/src/views/_core/authentication/qrcode-login.vue new file mode 100644 index 00000000..23f5f2da --- /dev/null +++ b/playground/src/views/_core/authentication/qrcode-login.vue @@ -0,0 +1,10 @@ + + + diff --git a/playground/src/views/_core/authentication/register.vue b/playground/src/views/_core/authentication/register.vue new file mode 100644 index 00000000..f6b227d9 --- /dev/null +++ b/playground/src/views/_core/authentication/register.vue @@ -0,0 +1,25 @@ + + + diff --git a/apps/web-antd/src/views/demos/nested/menu-1.vue b/playground/src/views/_core/fallback/coming-soon.vue similarity index 100% rename from apps/web-antd/src/views/demos/nested/menu-1.vue rename to playground/src/views/_core/fallback/coming-soon.vue diff --git a/playground/src/views/_core/fallback/forbidden.vue b/playground/src/views/_core/fallback/forbidden.vue new file mode 100644 index 00000000..8ea65fed --- /dev/null +++ b/playground/src/views/_core/fallback/forbidden.vue @@ -0,0 +1,9 @@ + + + diff --git a/playground/src/views/_core/fallback/internal-error.vue b/playground/src/views/_core/fallback/internal-error.vue new file mode 100644 index 00000000..819a47d5 --- /dev/null +++ b/playground/src/views/_core/fallback/internal-error.vue @@ -0,0 +1,9 @@ + + + diff --git a/playground/src/views/_core/fallback/not-found.vue b/playground/src/views/_core/fallback/not-found.vue new file mode 100644 index 00000000..4d178e9c --- /dev/null +++ b/playground/src/views/_core/fallback/not-found.vue @@ -0,0 +1,9 @@ + + + diff --git a/playground/src/views/_core/fallback/offline.vue b/playground/src/views/_core/fallback/offline.vue new file mode 100644 index 00000000..5de4a88d --- /dev/null +++ b/playground/src/views/_core/fallback/offline.vue @@ -0,0 +1,9 @@ + + + diff --git a/playground/src/views/_core/vben/about/index.vue b/playground/src/views/_core/vben/about/index.vue new file mode 100644 index 00000000..0ee52433 --- /dev/null +++ b/playground/src/views/_core/vben/about/index.vue @@ -0,0 +1,9 @@ + + + diff --git a/playground/src/views/dashboard/analytics/analytics-trends.vue b/playground/src/views/dashboard/analytics/analytics-trends.vue new file mode 100644 index 00000000..261c847c --- /dev/null +++ b/playground/src/views/dashboard/analytics/analytics-trends.vue @@ -0,0 +1,78 @@ + + + diff --git a/playground/src/views/dashboard/analytics/analytics-visits-data.vue b/playground/src/views/dashboard/analytics/analytics-visits-data.vue new file mode 100644 index 00000000..f03907d0 --- /dev/null +++ b/playground/src/views/dashboard/analytics/analytics-visits-data.vue @@ -0,0 +1,80 @@ + + + diff --git a/playground/src/views/dashboard/analytics/analytics-visits-sales.vue b/playground/src/views/dashboard/analytics/analytics-visits-sales.vue new file mode 100644 index 00000000..0529a3b0 --- /dev/null +++ b/playground/src/views/dashboard/analytics/analytics-visits-sales.vue @@ -0,0 +1,44 @@ + + + diff --git a/playground/src/views/dashboard/analytics/analytics-visits-source.vue b/playground/src/views/dashboard/analytics/analytics-visits-source.vue new file mode 100644 index 00000000..99292bf9 --- /dev/null +++ b/playground/src/views/dashboard/analytics/analytics-visits-source.vue @@ -0,0 +1,63 @@ + + + diff --git a/playground/src/views/dashboard/analytics/analytics-visits.vue b/playground/src/views/dashboard/analytics/analytics-visits.vue new file mode 100644 index 00000000..8230f6e5 --- /dev/null +++ b/playground/src/views/dashboard/analytics/analytics-visits.vue @@ -0,0 +1,53 @@ + + + diff --git a/playground/src/views/dashboard/analytics/index.vue b/playground/src/views/dashboard/analytics/index.vue new file mode 100644 index 00000000..00b34df1 --- /dev/null +++ b/playground/src/views/dashboard/analytics/index.vue @@ -0,0 +1,90 @@ + + + diff --git a/playground/src/views/dashboard/workspace/index.vue b/playground/src/views/dashboard/workspace/index.vue new file mode 100644 index 00000000..c8ae0273 --- /dev/null +++ b/playground/src/views/dashboard/workspace/index.vue @@ -0,0 +1,225 @@ + + + diff --git a/apps/web-antd/src/views/demos/access/admin-visible.vue b/playground/src/views/demos/access/admin-visible.vue similarity index 100% rename from apps/web-antd/src/views/demos/access/admin-visible.vue rename to playground/src/views/demos/access/admin-visible.vue diff --git a/apps/web-antd/src/views/demos/access/button-control.vue b/playground/src/views/demos/access/button-control.vue similarity index 100% rename from apps/web-antd/src/views/demos/access/button-control.vue rename to playground/src/views/demos/access/button-control.vue diff --git a/apps/web-antd/src/views/demos/access/index.vue b/playground/src/views/demos/access/index.vue similarity index 100% rename from apps/web-antd/src/views/demos/access/index.vue rename to playground/src/views/demos/access/index.vue diff --git a/apps/web-antd/src/views/demos/access/menu-visible-403.vue b/playground/src/views/demos/access/menu-visible-403.vue similarity index 100% rename from apps/web-antd/src/views/demos/access/menu-visible-403.vue rename to playground/src/views/demos/access/menu-visible-403.vue diff --git a/apps/web-antd/src/views/demos/access/super-visible.vue b/playground/src/views/demos/access/super-visible.vue similarity index 100% rename from apps/web-antd/src/views/demos/access/super-visible.vue rename to playground/src/views/demos/access/super-visible.vue diff --git a/apps/web-antd/src/views/demos/access/user-visible.vue b/playground/src/views/demos/access/user-visible.vue similarity index 100% rename from apps/web-antd/src/views/demos/access/user-visible.vue rename to playground/src/views/demos/access/user-visible.vue diff --git a/apps/web-antd/src/views/demos/active-icon/index.vue b/playground/src/views/demos/active-icon/index.vue similarity index 100% rename from apps/web-antd/src/views/demos/active-icon/index.vue rename to playground/src/views/demos/active-icon/index.vue diff --git a/apps/web-antd/src/views/demos/badge/index.vue b/playground/src/views/demos/badge/index.vue similarity index 100% rename from apps/web-antd/src/views/demos/badge/index.vue rename to playground/src/views/demos/badge/index.vue diff --git a/apps/web-antd/src/views/demos/breadcrumb/lateral-detail.vue b/playground/src/views/demos/breadcrumb/lateral-detail.vue similarity index 100% rename from apps/web-antd/src/views/demos/breadcrumb/lateral-detail.vue rename to playground/src/views/demos/breadcrumb/lateral-detail.vue diff --git a/apps/web-antd/src/views/demos/breadcrumb/lateral.vue b/playground/src/views/demos/breadcrumb/lateral.vue similarity index 100% rename from apps/web-antd/src/views/demos/breadcrumb/lateral.vue rename to playground/src/views/demos/breadcrumb/lateral.vue diff --git a/apps/web-antd/src/views/demos/breadcrumb/level-detail.vue b/playground/src/views/demos/breadcrumb/level-detail.vue similarity index 100% rename from apps/web-antd/src/views/demos/breadcrumb/level-detail.vue rename to playground/src/views/demos/breadcrumb/level-detail.vue diff --git a/apps/web-antd/src/views/demos/features/hide-menu-children/children.vue b/playground/src/views/demos/features/hide-menu-children/children.vue similarity index 100% rename from apps/web-antd/src/views/demos/features/hide-menu-children/children.vue rename to playground/src/views/demos/features/hide-menu-children/children.vue diff --git a/apps/web-antd/src/views/demos/features/hide-menu-children/parent.vue b/playground/src/views/demos/features/hide-menu-children/parent.vue similarity index 100% rename from apps/web-antd/src/views/demos/features/hide-menu-children/parent.vue rename to playground/src/views/demos/features/hide-menu-children/parent.vue diff --git a/apps/web-antd/src/views/demos/features/icons/index.vue b/playground/src/views/demos/features/icons/index.vue similarity index 100% rename from apps/web-antd/src/views/demos/features/icons/index.vue rename to playground/src/views/demos/features/icons/index.vue diff --git a/apps/web-antd/src/views/demos/features/login-expired/index.vue b/playground/src/views/demos/features/login-expired/index.vue similarity index 100% rename from apps/web-antd/src/views/demos/features/login-expired/index.vue rename to playground/src/views/demos/features/login-expired/index.vue diff --git a/apps/web-antd/src/views/demos/features/tabs/index.vue b/playground/src/views/demos/features/tabs/index.vue similarity index 100% rename from apps/web-antd/src/views/demos/features/tabs/index.vue rename to playground/src/views/demos/features/tabs/index.vue diff --git a/apps/web-antd/src/views/demos/features/tabs/tab-detail.vue b/playground/src/views/demos/features/tabs/tab-detail.vue similarity index 100% rename from apps/web-antd/src/views/demos/features/tabs/tab-detail.vue rename to playground/src/views/demos/features/tabs/tab-detail.vue diff --git a/apps/web-antd/src/views/demos/features/watermark/index.vue b/playground/src/views/demos/features/watermark/index.vue similarity index 100% rename from apps/web-antd/src/views/demos/features/watermark/index.vue rename to playground/src/views/demos/features/watermark/index.vue diff --git a/apps/web-antd/src/views/demos/nested/menu-2-1.vue b/playground/src/views/demos/nested/menu-1.vue similarity index 100% rename from apps/web-antd/src/views/demos/nested/menu-2-1.vue rename to playground/src/views/demos/nested/menu-1.vue diff --git a/apps/web-antd/src/views/demos/nested/menu-3-1.vue b/playground/src/views/demos/nested/menu-2-1.vue similarity index 100% rename from apps/web-antd/src/views/demos/nested/menu-3-1.vue rename to playground/src/views/demos/nested/menu-2-1.vue diff --git a/apps/web-antd/src/views/demos/nested/menu-3-2-1.vue b/playground/src/views/demos/nested/menu-3-1.vue similarity index 100% rename from apps/web-antd/src/views/demos/nested/menu-3-2-1.vue rename to playground/src/views/demos/nested/menu-3-1.vue diff --git a/playground/src/views/demos/nested/menu-3-2-1.vue b/playground/src/views/demos/nested/menu-3-2-1.vue new file mode 100644 index 00000000..f394930f --- /dev/null +++ b/playground/src/views/demos/nested/menu-3-2-1.vue @@ -0,0 +1,7 @@ + + + diff --git a/apps/web-antd/src/views/examples/ellipsis/data.ts b/playground/src/views/examples/ellipsis/data.ts similarity index 100% rename from apps/web-antd/src/views/examples/ellipsis/data.ts rename to playground/src/views/examples/ellipsis/data.ts diff --git a/apps/web-antd/src/views/examples/ellipsis/index.vue b/playground/src/views/examples/ellipsis/index.vue similarity index 100% rename from apps/web-antd/src/views/examples/ellipsis/index.vue rename to playground/src/views/examples/ellipsis/index.vue diff --git a/playground/tailwind.config.mjs b/playground/tailwind.config.mjs new file mode 100644 index 00000000..f17f556f --- /dev/null +++ b/playground/tailwind.config.mjs @@ -0,0 +1 @@ +export { default } from '@vben/tailwind-config'; diff --git a/playground/tsconfig.json b/playground/tsconfig.json new file mode 100644 index 00000000..02c287fe --- /dev/null +++ b/playground/tsconfig.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "extends": "@vben/tsconfig/web-app.json", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "#/*": ["./src/*"] + } + }, + "references": [{ "path": "./tsconfig.node.json" }], + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] +} diff --git a/playground/tsconfig.node.json b/playground/tsconfig.node.json new file mode 100644 index 00000000..c2f0d86c --- /dev/null +++ b/playground/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "extends": "@vben/tsconfig/node.json", + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "noEmit": false + }, + "include": ["vite.config.mts"] +} diff --git a/playground/vite.config.mts b/playground/vite.config.mts new file mode 100644 index 00000000..b6360f1d --- /dev/null +++ b/playground/vite.config.mts @@ -0,0 +1,20 @@ +import { defineConfig } from '@vben/vite-config'; + +export default defineConfig(async () => { + return { + application: {}, + vite: { + server: { + proxy: { + '/api': { + changeOrigin: true, + rewrite: (path) => path.replace(/^\/api/, ''), + // mock代理目标地址 + target: 'http://localhost:5320/api', + ws: true, + }, + }, + }, + }, + }; +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 51a96ccf..3bed673a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1071,6 +1071,69 @@ importers: specifier: ^4.4.3 version: 4.4.3(vue@3.4.37(typescript@5.5.4)) + playground: + dependencies: + '@vben/access': + specifier: workspace:* + version: link:../packages/effects/access + '@vben/chart-ui': + specifier: workspace:* + version: link:../packages/effects/chart-ui + '@vben/common-ui': + specifier: workspace:* + version: link:../packages/effects/common-ui + '@vben/constants': + specifier: workspace:* + version: link:../packages/constants + '@vben/hooks': + specifier: workspace:* + version: link:../packages/effects/hooks + '@vben/icons': + specifier: workspace:* + version: link:../packages/icons + '@vben/layouts': + specifier: workspace:* + version: link:../packages/effects/layouts + '@vben/locales': + specifier: workspace:* + version: link:../packages/locales + '@vben/preferences': + specifier: workspace:* + version: link:../packages/preferences + '@vben/request': + specifier: workspace:* + version: link:../packages/effects/request + '@vben/stores': + specifier: workspace:* + version: link:../packages/stores + '@vben/styles': + specifier: workspace:* + version: link:../packages/styles + '@vben/types': + specifier: workspace:* + version: link:../packages/types + '@vben/utils': + specifier: workspace:* + version: link:../packages/utils + '@vueuse/core': + specifier: ^10.11.1 + version: 10.11.1(vue@3.4.37(typescript@5.5.4)) + ant-design-vue: + specifier: ^4.2.3 + version: 4.2.3(vue@3.4.37(typescript@5.5.4)) + dayjs: + specifier: ^1.11.12 + version: 1.11.12 + pinia: + specifier: 2.2.1 + version: 2.2.1(typescript@5.5.4)(vue@3.4.37(typescript@5.5.4)) + vue: + specifier: ^3.4.37 + version: 3.4.37(typescript@5.5.4) + vue-router: + specifier: ^4.4.3 + version: 4.4.3(vue@3.4.37(typescript@5.5.4)) + scripts/turbo-run: dependencies: '@clack/prompts': @@ -3281,7 +3344,6 @@ packages: '@ls-lint/ls-lint@2.2.3': resolution: {integrity: sha512-ekM12jNm/7O2I/hsRv9HvYkRdfrHpiV1epVuI2NP+eTIcEgdIdKkKCs9KgQydu/8R5YXTov9aHdOgplmCHLupw==} - cpu: [x64, arm64, s390x] os: [darwin, linux, win32] hasBin: true diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index cfbcb245..885e9c06 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -11,3 +11,4 @@ packages: - "apps/*" - "scripts/*" - "docs" + - "playground" diff --git a/vben-admin.code-workspace b/vben-admin.code-workspace index 445c0f32..dc337256 100644 --- a/vben-admin.code-workspace +++ b/vben-admin.code-workspace @@ -148,6 +148,10 @@ "name": "@vben/utils", "path": "packages/utils", }, + { + "name": "@vben/playground", + "path": "playground", + }, { "name": "@vben/turbo-run", "path": "scripts/turbo-run",