Compare commits

..

1 Commits

Author SHA1 Message Date
vben
f3e7438a49 chore: release v5.3.0-beta.1 2024-09-10 22:07:54 +08:00
746 changed files with 9487 additions and 21377 deletions

View File

@@ -3,5 +3,3 @@ node_modules
.gitignore .gitignore
*.md *.md
dist dist
.turbo
dist.zip

View File

@@ -1,7 +1,7 @@
name: 🐞 Bug Report name: 🐞 Bug Report
description: Report an issue with Vben Admin to help us make it better. description: Report an issue with Vben Admin to help us make it better.
title: 'Bug: ' title: "Bug: "
labels: ['bug: pending triage'] labels: ["bug: pending triage"]
body: body:
- type: markdown - type: markdown

View File

@@ -1,6 +1,6 @@
name: 📚 Documentation name: 📚 Documentation
description: Report an issue with Vben Admin Website to help us make it better. description: Report an issue with Vben Admin Website to help us make it better.
title: 'Docs: ' title: "Docs: "
labels: [documentation] labels: [documentation]
body: body:
- type: markdown - type: markdown

View File

@@ -1,7 +1,7 @@
name: ✨ New Feature Proposal name: ✨ New Feature Proposal
description: Propose a new feature to be added to Vben Admin description: Propose a new feature to be added to Vben Admin
title: 'FEATURE: ' title: "FEATURE: "
labels: ['enhancement: pending triage'] labels: ["enhancement: pending triage"]
body: body:
- type: markdown - type: markdown
attributes: attributes:

View File

@@ -1,9 +1,9 @@
name: 'Setup Node' name: "Setup Node"
description: 'Setup node and pnpm' description: "Setup node and pnpm"
runs: runs:
using: 'composite' using: "composite"
steps: steps:
- name: Install pnpm - name: Install pnpm
uses: pnpm/action-setup@v4 uses: pnpm/action-setup@v4
@@ -12,7 +12,7 @@ runs:
uses: actions/setup-node@v4 uses: actions/setup-node@v4
with: with:
node-version-file: .node-version node-version-file: .node-version
cache: 'pnpm' cache: "pnpm"
- name: Get pnpm store directory - name: Get pnpm store directory
shell: bash shell: bash

View File

@@ -1,7 +1,7 @@
version: 2 version: 2
updates: updates:
- package-ecosystem: npm - package-ecosystem: npm
directory: '/' directory: "/"
schedule: schedule:
interval: daily interval: daily
groups: groups:
@@ -9,7 +9,7 @@ updates:
update-types: [minor, patch] update-types: [minor, patch]
- package-ecosystem: github-actions - package-ecosystem: github-actions
directory: '/' directory: "/"
schedule: schedule:
interval: weekly interval: weekly
groups: groups:

View File

@@ -1,7 +1,7 @@
name-template: 'v$RESOLVED_VERSION' name-template: "v$RESOLVED_VERSION"
tag-template: 'v$RESOLVED_VERSION' tag-template: "v$RESOLVED_VERSION"
version-template: $MAJOR.$MINOR.$PATCH version-template: $MAJOR.$MINOR.$PATCH
change-template: '* $TITLE (#$NUMBER) @$AUTHOR' change-template: "* $TITLE (#$NUMBER) @$AUTHOR"
template: | template: |
# What's Changed # What's Changed
@@ -10,52 +10,52 @@ template: |
**Full Changelog**: https://github.com/$OWNER/$REPOSITORY/compare/$PREVIOUS_TAG...v$RESOLVED_VERSION **Full Changelog**: https://github.com/$OWNER/$REPOSITORY/compare/$PREVIOUS_TAG...v$RESOLVED_VERSION
categories: categories:
- title: '🚀 Features' - title: "🚀 Features"
labels: labels:
- 'feature' - "feature"
- title: '🐞 Bug Fixes' - title: "🐞 Bug Fixes"
labels: labels:
- 'bug' - "bug"
- title: '📈 Performance & Enhancement' - title: "📈 Performance"
labels: labels:
- 'perf' - "perf"
- 'enhancement' - "enhancement"
- title: 📝 Documentation - title: 📝 Documentation
labels: labels:
- 'documentation' - "documentation"
- title: 👻 Maintenance - title: 👻 Maintenance
labels: labels:
- 'chore' - "chore"
- 'dependencies' - "dependencies"
# collapse-after: 12 # collapse-after: 12
- title: 🚦 Tests - title: 🚦 Tests
labels: labels:
- 'tests' - "tests"
- title: 'Breaking' - title: "Breaking"
label: 'breaking' label: "breaking"
version-resolver: version-resolver:
major: major:
labels: labels:
- 'major' - "major"
- 'breaking' - "breaking"
minor: minor:
labels: labels:
- 'minor' - "minor"
patch: patch:
labels: labels:
- 'feature' - "feature"
- 'patch' - "patch"
- 'bug' - "bug"
- 'maintenance' - "maintenance"
- 'docs' - "docs"
- 'dependencies' - "dependencies"
- 'security' - "security"
exclude-labels: exclude-labels:
- 'skip-changelog' - "skip-changelog"
- 'no-changelog' - "no-changelog"
- 'changelog' - "changelog"
- 'bump versions' - "bump versions"
- 'reverted' - "reverted"
- 'invalid' - "invalid"

View File

@@ -7,7 +7,7 @@ on:
- main - main
env: env:
HUSKY: '0' HUSKY: "0"
concurrency: concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.number }} group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
@@ -19,15 +19,8 @@ permissions:
jobs: jobs:
post-update: post-update:
if: github.repository == 'vbenjs/vue-vben-admin'
# if: ${{ github.actor == 'dependabot[bot]' }} # if: ${{ github.actor == 'dependabot[bot]' }}
runs-on: ${{ matrix.os }} runs-on: ubuntu-latest
strategy:
matrix:
os:
- ubuntu-latest
# - macos-latest
- windows-latest
steps: steps:
- name: Checkout code - name: Checkout code
uses: actions/checkout@v4 uses: actions/checkout@v4

View File

@@ -18,7 +18,7 @@ env:
jobs: jobs:
version: version:
if: (github.event.pull_request.merged || github.event_name == 'workflow_dispatch') && github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin' if: (github.event.pull_request.merged || github.event_name == 'workflow_dispatch') && github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
# if: github.repository == 'vbenjs/vue-vben-admin' # if: github.repository == 'vbenjs/vue-vben-admin'
timeout-minutes: 15 timeout-minutes: 15
runs-on: ubuntu-latest runs-on: ubuntu-latest
@@ -36,7 +36,7 @@ jobs:
uses: changesets/action@v1 uses: changesets/action@v1
with: with:
version: pnpm run version version: pnpm run version
commit: 'chore: bump versions' commit: "chore: bump versions"
title: 'chore: bump versions' title: "chore: bump versions"
env: env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

View File

@@ -5,7 +5,7 @@ on:
push: push:
branches: branches:
- main - main
- 'releases/*' - "releases/*"
permissions: permissions:
contents: read contents: read
@@ -17,7 +17,7 @@ env:
jobs: jobs:
test: test:
name: Test name: Test
if: github.repository == 'vbenjs/vue-vben-admin' if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
runs-on: ${{ matrix.os }} runs-on: ${{ matrix.os }}
strategy: strategy:
matrix: matrix:
@@ -56,7 +56,7 @@ jobs:
lint: lint:
name: Lint name: Lint
if: github.repository == 'vbenjs/vue-vben-admin' if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
runs-on: ${{ matrix.os }} runs-on: ${{ matrix.os }}
strategy: strategy:
matrix: matrix:
@@ -79,7 +79,6 @@ jobs:
check: check:
name: Check name: Check
if: github.repository == 'vbenjs/vue-vben-admin'
runs-on: ${{ matrix.os }} runs-on: ${{ matrix.os }}
timeout-minutes: 20 timeout-minutes: 20
strategy: strategy:
@@ -109,8 +108,8 @@ jobs:
ci-ok: ci-ok:
name: CI OK name: CI OK
if: github.repository == 'vbenjs/vue-vben-admin'
runs-on: ubuntu-latest runs-on: ubuntu-latest
if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && always()
needs: [test, check, lint] needs: [test, check, lint]
env: env:
FAILURE: ${{ contains(join(needs.*.result, ','), 'failure') }} FAILURE: ${{ contains(join(needs.*.result, ','), 'failure') }}

View File

@@ -9,20 +9,19 @@
# the `language` matrix defined below to confirm you have the correct set of # the `language` matrix defined below to confirm you have the correct set of
# supported CodeQL languages. # supported CodeQL languages.
# #
name: 'CodeQL' name: "CodeQL"
on: on:
push: push:
branches: ['main'] branches: ["main"]
pull_request: pull_request:
branches: ['main'] branches: ["main"]
schedule: schedule:
- cron: '35 0 * * 0' - cron: "35 0 * * 0"
jobs: jobs:
analyze: analyze:
name: Analyze (${{ matrix.language }}) name: Analyze (${{ matrix.language }})
if: github.repository == 'vbenjs/vue-vben-admin'
# Runner size impacts CodeQL analysis time. To learn more, please see: # Runner size impacts CodeQL analysis time. To learn more, please see:
# - https://gh.io/recommended-hardware-resources-for-running-codeql # - https://gh.io/recommended-hardware-resources-for-running-codeql
# - https://gh.io/supported-runners-and-hardware-resources # - https://gh.io/supported-runners-and-hardware-resources
@@ -91,4 +90,4 @@ jobs:
- name: Perform CodeQL Analysis - name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v3 uses: github/codeql-action/analyze@v3
with: with:
category: '/language:${{matrix.language}}' category: "/language:${{matrix.language}}"

View File

@@ -8,7 +8,7 @@ on:
jobs: jobs:
deploy-playground-ftp: deploy-playground-ftp:
name: Deploy Push Playground Ftp name: Deploy Push Playground Ftp
if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin' if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout code - name: Checkout code
@@ -39,7 +39,7 @@ jobs:
deploy-docs-ftp: deploy-docs-ftp:
name: Deploy Push Docs Ftp name: Deploy Push Docs Ftp
if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin' if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout code - name: Checkout code
@@ -63,7 +63,7 @@ jobs:
deploy-antd-ftp: deploy-antd-ftp:
name: Deploy Push Antd Ftp name: Deploy Push Antd Ftp
if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin' if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout code - name: Checkout code
@@ -94,7 +94,7 @@ jobs:
deploy-ele-ftp: deploy-ele-ftp:
name: Deploy Push Element Ftp name: Deploy Push Element Ftp
if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin' if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout code - name: Checkout code
@@ -125,7 +125,7 @@ jobs:
deploy-naive-ftp: deploy-naive-ftp:
name: Deploy Push Naive Ftp name: Deploy Push Naive Ftp
if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') && github.repository == 'vbenjs/vue-vben-admin' if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout code - name: Checkout code

View File

@@ -17,7 +17,6 @@ jobs:
# write permission is required for autolabeler # write permission is required for autolabeler
# otherwise, read permission is required at least # otherwise, read permission is required at least
pull-requests: write pull-requests: write
if: github.repository == 'vbenjs/vue-vben-admin'
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: release-drafter/release-drafter@v6 - uses: release-drafter/release-drafter@v6

View File

@@ -3,29 +3,23 @@ name: Issue Close Require
# 触发条件:每天零点 # 触发条件:每天零点
on: on:
workflow_dispatch:
schedule: schedule:
- cron: '0 0 * * *' - cron: "0 0 * * *"
permissions: permissions:
pull-requests: write pull-requests: write
contents: write contents: write
issues: write
jobs: jobs:
close-issues: close-issues:
if: github.repository == 'vbenjs/vue-vben-admin'
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
# 关闭未活动的 Issues # 步骤1关闭未活动的 Issues
- name: Close Inactive Issues - name: Close Inactive Issues
uses: actions/stale@v9 uses: actions-cool/issues-helper@v3
with: with:
days-before-stale: -1 # Issues and PR will never be flagged stale automatically. actions: "close-issues" # 执行动作:关闭 Issues
stale-issue-label: needs-reproduction # Label that flags an issue as stale. token: ${{ secrets.GITHUB_TOKEN }} # GitHub Token用于认证
only-labels: needs-reproduction # Only process these issues labels: "needs reproduction" # 目标标签
days-before-issue-close: 3 inactive-day: 3 # 未活动天数阈值
ignore-updates: true
remove-stale-when-updated: false
close-issue-message: This issue was closed because it was open for 3 days without a valid reproduction.
close-issue-label: closed-by-action

View File

@@ -13,34 +13,33 @@ permissions:
jobs: jobs:
reply-labeled: reply-labeled:
if: github.repository == 'vbenjs/vue-vben-admin'
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: remove enhancement pending - name: remove enhancement pending
if: github.event.label.name == 'enhancement' if: github.event.label.name == 'enhancement'
uses: actions-cool/issues-helper@v3 uses: actions-cool/issues-helper@v3
with: with:
actions: 'remove-labels' actions: "remove-labels"
token: ${{ secrets.GITHUB_TOKEN }} token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ github.event.issue.number }} issue-number: ${{ github.event.issue.number }}
labels: 'enhancement: pending triage' labels: "enhancement: pending triage"
- name: remove bug pending - name: remove bug pending
if: github.event.label.name == 'bug' if: github.event.label.name == 'bug'
uses: actions-cool/issues-helper@v3 uses: actions-cool/issues-helper@v3
with: with:
actions: 'remove-labels' actions: "remove-labels"
token: ${{ secrets.GITHUB_TOKEN }} token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ github.event.issue.number }} issue-number: ${{ github.event.issue.number }}
labels: 'bug: pending triage' labels: "bug: pending triage"
- name: needs reproduction - name: needs reproduction
if: github.event.label.name == 'needs reproduction' if: github.event.label.name == 'needs reproduction'
uses: actions-cool/issues-helper@v3 uses: actions-cool/issues-helper@v3
with: with:
actions: 'create-comment, remove-labels' actions: "create-comment, remove-labels"
token: ${{ secrets.GITHUB_TOKEN }} token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ github.event.issue.number }} issue-number: ${{ github.event.issue.number }}
body: | body: |
Hello @${{ github.event.issue.user.login }}. Please provide the complete reproduction steps and code. Issues labeled by `needs reproduction` will be closed if no activities in 3 days. Hello @${{ github.event.issue.user.login }}. Please provide the complete reproduction steps and code. Issues labeled by `needs reproduction` will be closed if no activities in 3 days.
labels: 'bug: pending triage' labels: "bug: pending triage"

View File

@@ -2,7 +2,7 @@ name: Lock Threads
on: on:
schedule: schedule:
- cron: '0 0 * * *' - cron: "0 0 * * *"
workflow_dispatch: workflow_dispatch:
permissions: permissions:
@@ -11,14 +11,13 @@ permissions:
jobs: jobs:
action: action:
if: github.repository == 'vbenjs/vue-vben-admin'
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: dessant/lock-threads@v5 - uses: dessant/lock-threads@v5
with: with:
github-token: ${{ secrets.GITHUB_TOKEN }} github-token: ${{ secrets.GITHUB_TOKEN }}
issue-inactive-days: '14' issue-inactive-days: "30"
issue-lock-reason: '' issue-lock-reason: ""
pr-inactive-days: '30' pr-inactive-days: "30"
pr-lock-reason: '' pr-lock-reason: ""
process-only: 'issues, prs' process-only: "issues, prs"

View File

@@ -3,10 +3,10 @@ name: Create Release Tag
on: on:
push: push:
tags: tags:
- 'v*.*.*' # Push events to matching v*, i.e. v1.0, v20.15.10 - "v*.*.*" # Push events to matching v*, i.e. v1.0, v20.15.10
env: env:
HUSKY: '0' HUSKY: "0"
permissions: permissions:
pull-requests: write pull-requests: write
@@ -15,7 +15,6 @@ permissions:
jobs: jobs:
build: build:
name: Create Release name: Create Release
if: github.repository == 'vbenjs/vue-vben-admin'
runs-on: ubuntu-latest runs-on: ubuntu-latest
strategy: strategy:
matrix: matrix:

View File

@@ -9,9 +9,8 @@ on:
jobs: jobs:
main: main:
name: Semantic Pull Request
if: github.repository == 'vbenjs/vue-vben-admin'
runs-on: ubuntu-latest runs-on: ubuntu-latest
name: Semantic Pull Request
steps: steps:
- name: Validate PR title - name: Validate PR title
uses: amannn/action-semantic-pull-request@v5 uses: amannn/action-semantic-pull-request@v5

View File

@@ -1,19 +1,18 @@
name: 'Close stale issues' name: "Close stale issues"
on: on:
schedule: schedule:
- cron: '0 1 * * *' - cron: "0 1 * * *"
jobs: jobs:
stale: stale:
if: github.repository == 'vbenjs/vue-vben-admin'
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/stale@v9 - uses: actions/stale@v9
with: with:
repo-token: ${{ secrets.GITHUB_TOKEN }} repo-token: ${{ secrets.GITHUB_TOKEN }}
stale-issue-message: 'This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days' stale-issue-message: "This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days"
stale-pr-message: 'This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days' stale-pr-message: "This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days"
exempt-issue-labels: 'bug,enhancement' exempt-issue-labels: "bug,enhancement"
days-before-stale: 60 days-before-stale: 60
days-before-close: 7 days-before-close: 7

View File

@@ -3,4 +3,4 @@ ports:
onOpen: open-preview onOpen: open-preview
tasks: tasks:
- init: corepack enable && pnpm install - init: corepack enable && pnpm install
command: pnpm run dev:play command: pnpm run dev

View File

@@ -19,9 +19,7 @@
// i18n 插件 // i18n 插件
"Lokalise.i18n-ally", "Lokalise.i18n-ally",
// CSS 变量提示 // CSS 变量提示
"vunguyentuan.vscode-css-variables", "vunguyentuan.vscode-css-variables"
// 在 package.json 中显示 PNPM catalog 的版本
"antfu.pnpm-catalog-lens"
], ],
"unwantedRecommendations": [ "unwantedRecommendations": [
// 和 volar 冲突 // 和 volar 冲突

10
.vscode/settings.json vendored
View File

@@ -160,7 +160,6 @@
"stylelint.enable": true, "stylelint.enable": true,
"stylelint.packageManager": "pnpm", "stylelint.packageManager": "pnpm",
"stylelint.validate": ["css", "less", "postcss", "scss", "vue"], "stylelint.validate": ["css", "less", "postcss", "scss", "vue"],
"stylelint.customSyntax": "postcss-html",
"stylelint.snippet": ["css", "less", "postcss", "scss", "vue"], "stylelint.snippet": ["css", "less", "postcss", "scss", "vue"],
"typescript.inlayHints.enumMemberValues.enabled": true, "typescript.inlayHints.enumMemberValues.enabled": true,
@@ -198,14 +197,11 @@
"playground/src/locales/langs", "playground/src/locales/langs",
"apps/*/src/locales/langs" "apps/*/src/locales/langs"
], ],
"i18n-ally.pathMatcher": "{locale}/{namespace}.{ext}", "i18n-ally.pathMatcher": "{locale}.json",
"i18n-ally.enabledParsers": ["json"], "i18n-ally.enabledParsers": ["json", "ts", "js", "yaml"],
"i18n-ally.sourceLanguage": "en", "i18n-ally.sourceLanguage": "en",
"i18n-ally.displayLanguage": "zh-CN", "i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.enabledFrameworks": ["vue", "react"], "i18n-ally.enabledFrameworks": ["vue", "react"],
"i18n-ally.keystyle": "nested",
"i18n-ally.sortKeys": true,
"i18n-ally.namespace": true,
// 控制相关文件嵌套展示 // 控制相关文件嵌套展示
"explorer.fileNesting.enabled": true, "explorer.fileNesting.enabled": true,
@@ -216,10 +212,12 @@
"*.env": "$(capture).env.*", "*.env": "$(capture).env.*",
"README.md": "README*,CHANGELOG*,LICENSE,CNAME", "README.md": "README*,CHANGELOG*,LICENSE,CNAME",
"package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json", "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json",
"Dockerfile": "Dockerfile,.docker*,docker-entrypoint.sh,build-local-docker*,nginx.conf",
"eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json", "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json",
"tailwind.config.mjs": "postcss.*" "tailwind.config.mjs": "postcss.*"
}, },
"commentTranslate.hover.enabled": false, "commentTranslate.hover.enabled": false,
"i18n-ally.keystyle": "nested",
"commentTranslate.multiLineMerge": true, "commentTranslate.multiLineMerge": true,
"vue.server.hybridMode": true, "vue.server.hybridMode": true,
"typescript.tsdk": "node_modules/typescript/lib" "typescript.tsdk": "node_modules/typescript/lib"

View File

@@ -14,16 +14,16 @@ WORKDIR /app
COPY . /app COPY . /app
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
RUN pnpm run build --filter=\!./docs RUN pnpm run build
RUN echo "Builder Success 🎉" RUN echo "Builder Success 🎉"
FROM nginx:stable-alpine AS production FROM nginx:stable-alpine as production
RUN echo "types { application/javascript js mjs; }" > /etc/nginx/conf.d/mjs.conf RUN echo "types { application/javascript js mjs; }" > /etc/nginx/conf.d/mjs.conf
COPY --from=builder /app/playground/dist /usr/share/nginx/html COPY --from=builder /app/playground/dist /usr/share/nginx/html
COPY --from=builder /app/scripts/deploy/nginx.conf /etc/nginx/nginx.conf COPY ./nginx.conf /etc/nginx/nginx.conf
EXPOSE 8080 EXPOSE 8080

View File

@@ -1,4 +1,4 @@
<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br> <div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
[![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE) [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
@@ -125,15 +125,11 @@ pnpm build
[@Vben](https://github.com/anncwb) [@Vben](https://github.com/anncwb)
## スター歴史
[![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
## 寄付 ## 寄付
このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます! このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます!
![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png) ![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a> <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>

View File

@@ -1,4 +1,4 @@
<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br> <div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
[![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE) [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
@@ -124,17 +124,13 @@ Support modern browsers, not IE
[@Vben](https://github.com/anncwb) [@Vben](https://github.com/anncwb)
## Star History
[![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
## Donate ## Donate
If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support! If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png) ![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aee;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a> <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
## Contributor ## Contributor

View File

@@ -1,4 +1,4 @@
<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br> <div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
[![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE) [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
@@ -77,10 +77,6 @@ pnpm dev
pnpm build pnpm build
``` ```
## 更新日志
[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
## 如何贡献 ## 如何贡献
非常欢迎你的加入![提一个 Issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) 或者提交一个 Pull Request。 非常欢迎你的加入![提一个 Issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) 或者提交一个 Pull Request。
@@ -124,18 +120,18 @@ pnpm build
[@Vben](https://github.com/anncwb) [@Vben](https://github.com/anncwb)
## Star History
[![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
## 捐赠 ## 捐赠
如果你觉得这个项目对你有帮助,你可以帮作者买一杯咖啡表示支持! 如果你觉得这个项目对你有帮助,你可以帮作者买一杯咖啡表示支持!
![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png) ![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a> <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
## 更新日志
[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
## Contributor ## Contributor
<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors"> <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">

View File

@@ -21,7 +21,7 @@ export default defineEventHandler(async (event) => {
if (!findUser) { if (!findUser) {
clearRefreshTokenCookie(event); clearRefreshTokenCookie(event);
return forbiddenResponse(event, 'Username or password is incorrect.'); return forbiddenResponse(event);
} }
const accessToken = generateAccessToken(findUser); const accessToken = generateAccessToken(findUser);

View File

@@ -1,7 +1,7 @@
import { verifyAccessToken } from '~/utils/jwt-utils'; import { verifyAccessToken } from '~/utils/jwt-utils';
import { unAuthorizedResponse } from '~/utils/response'; import { unAuthorizedResponse } from '~/utils/response';
export default eventHandler(async (event) => { export default eventHandler((event) => {
const userinfo = verifyAccessToken(event); const userinfo = verifyAccessToken(event);
if (!userinfo) { if (!userinfo) {
return unAuthorizedResponse(event); return unAuthorizedResponse(event);

View File

@@ -1,48 +0,0 @@
import { faker } from '@faker-js/faker';
import { verifyAccessToken } from '~/utils/jwt-utils';
import { unAuthorizedResponse } from '~/utils/response';
function generateMockDataList(count: number) {
const dataList = [];
for (let i = 0; i < count; i++) {
const dataItem = {
id: faker.string.uuid(),
imageUrl: faker.image.avatar(),
imageUrl2: faker.image.avatar(),
open: faker.datatype.boolean(),
status: faker.helpers.arrayElement(['success', 'error', 'warning']),
productName: faker.commerce.productName(),
price: faker.commerce.price(),
currency: faker.finance.currencyCode(),
quantity: faker.number.int({ min: 1, max: 100 }),
available: faker.datatype.boolean(),
category: faker.commerce.department(),
releaseDate: faker.date.past(),
rating: faker.number.float({ min: 1, max: 5 }),
description: faker.commerce.productDescription(),
weight: faker.number.float({ min: 0.1, max: 10 }),
color: faker.color.human(),
inProduction: faker.datatype.boolean(),
tags: Array.from({ length: 3 }, () => faker.commerce.productAdjective()),
};
dataList.push(dataItem);
}
return dataList;
}
const mockData = generateMockDataList(100);
export default eventHandler(async (event) => {
const userinfo = verifyAccessToken(event);
if (!userinfo) {
return unAuthorizedResponse(event);
}
await sleep(600);
const { page, pageSize } = getQuery(event);
return usePageResponseSuccess(page as string, pageSize as string, mockData);
});

View File

@@ -6,5 +6,6 @@ export default eventHandler((event) => {
if (!userinfo) { if (!userinfo) {
return unAuthorizedResponse(event); return unAuthorizedResponse(event);
} }
return useResponseSuccess(userinfo); return useResponseSuccess(userinfo);
}); });

View File

@@ -1,6 +1,5 @@
import errorHandler from './error'; import errorHandler from './error';
process.env.COMPATIBILITY_DATE = new Date().toISOString();
export default defineNitroConfig({ export default defineNitroConfig({
devErrorHandler: errorHandler, devErrorHandler: errorHandler,
errorHandler: '~/error', errorHandler: '~/error',

View File

@@ -10,12 +10,11 @@
"start": "nitro dev" "start": "nitro dev"
}, },
"dependencies": { "dependencies": {
"@faker-js/faker": "catalog:", "jsonwebtoken": "^9.0.2",
"jsonwebtoken": "catalog:", "nitropack": "^2.9.7"
"nitropack": "catalog:"
}, },
"devDependencies": { "devDependencies": {
"@types/jsonwebtoken": "catalog:", "@types/jsonwebtoken": "^9.0.6",
"h3": "catalog:" "h3": "^1.12.0"
} }
} }

View File

@@ -86,7 +86,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
component: '/demos/access/admin-visible', component: '/demos/access/admin-visible',
meta: { meta: {
icon: 'mdi:button-cursor', icon: 'mdi:button-cursor',
title: 'demos.access.adminVisible', title: 'page.demos.access.adminVisible',
}, },
name: 'AccessAdminVisibleDemo', name: 'AccessAdminVisibleDemo',
path: '/demos/access/admin-visible', path: '/demos/access/admin-visible',
@@ -95,7 +95,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
component: '/demos/access/super-visible', component: '/demos/access/super-visible',
meta: { meta: {
icon: 'mdi:button-cursor', icon: 'mdi:button-cursor',
title: 'demos.access.superVisible', title: 'page.demos.access.superVisible',
}, },
name: 'AccessSuperVisibleDemo', name: 'AccessSuperVisibleDemo',
path: '/demos/access/super-visible', path: '/demos/access/super-visible',
@@ -104,7 +104,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
component: '/demos/access/user-visible', component: '/demos/access/user-visible',
meta: { meta: {
icon: 'mdi:button-cursor', icon: 'mdi:button-cursor',
title: 'demos.access.userVisible', title: 'page.demos.access.userVisible',
}, },
name: 'AccessUserVisibleDemo', name: 'AccessUserVisibleDemo',
path: '/demos/access/user-visible', path: '/demos/access/user-visible',
@@ -118,7 +118,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
icon: 'ic:baseline-view-in-ar', icon: 'ic:baseline-view-in-ar',
keepAlive: true, keepAlive: true,
order: 1000, order: 1000,
title: 'demos.title', title: 'page.demos.title',
}, },
name: 'Demos', name: 'Demos',
path: '/demos', path: '/demos',
@@ -129,7 +129,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
path: '/demosaccess', path: '/demosaccess',
meta: { meta: {
icon: 'mdi:cloud-key-outline', icon: 'mdi:cloud-key-outline',
title: 'demos.access.backendPermissions', title: 'page.demos.access.backendPermissions',
}, },
redirect: '/demos/access/page-control', redirect: '/demos/access/page-control',
children: [ children: [
@@ -139,7 +139,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
component: '/demos/access/index', component: '/demos/access/index',
meta: { meta: {
icon: 'mdi:page-previous-outline', icon: 'mdi:page-previous-outline',
title: 'demos.access.pageAccess', title: 'page.demos.access.pageAccess',
}, },
}, },
{ {
@@ -148,7 +148,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
component: '/demos/access/button-control', component: '/demos/access/button-control',
meta: { meta: {
icon: 'mdi:button-cursor', icon: 'mdi:button-cursor',
title: 'demos.access.buttonControl', title: 'page.demos.access.buttonControl',
}, },
}, },
{ {
@@ -159,7 +159,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
authority: ['no-body'], authority: ['no-body'],
icon: 'mdi:button-cursor', icon: 'mdi:button-cursor',
menuVisibleWithForbidden: true, menuVisibleWithForbidden: true,
title: 'demos.access.menuVisible403', title: 'page.demos.access.menuVisible403',
}, },
}, },
roleWithMenus[role], roleWithMenus[role],

View File

@@ -9,27 +9,6 @@ export function useResponseSuccess<T = any>(data: T) {
}; };
} }
export function usePageResponseSuccess<T = any>(
page: number | string,
pageSize: number | string,
list: T[],
{ message = 'ok' } = {},
) {
const pageData = pagination(
Number.parseInt(`${page}`),
Number.parseInt(`${pageSize}`),
list,
);
return {
...useResponseSuccess({
items: pageData,
total: list.length,
}),
message,
};
}
export function useResponseError(message: string, error: any = null) { export function useResponseError(message: string, error: any = null) {
return { return {
code: -1, code: -1,
@@ -39,30 +18,12 @@ export function useResponseError(message: string, error: any = null) {
}; };
} }
export function forbiddenResponse( export function forbiddenResponse(event: H3Event<EventHandlerRequest>) {
event: H3Event<EventHandlerRequest>,
message = 'Forbidden Exception',
) {
setResponseStatus(event, 403); setResponseStatus(event, 403);
return useResponseError(message, message); return useResponseError('ForbiddenException', 'Forbidden Exception');
} }
export function unAuthorizedResponse(event: H3Event<EventHandlerRequest>) { export function unAuthorizedResponse(event: H3Event<EventHandlerRequest>) {
setResponseStatus(event, 401); setResponseStatus(event, 401);
return useResponseError('Unauthorized Exception', 'Unauthorized Exception'); return useResponseError('UnauthorizedException', 'Unauthorized Exception');
}
export function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
export function pagination<T = any>(
pageNo: number,
pageSize: number,
array: T[],
): T[] {
const offset = (pageNo - 1) * Number(pageSize);
return offset + Number(pageSize) >= array.length
? array.slice(offset)
: array.slice(offset, offset + Number(pageSize));
} }

View File

@@ -1,6 +1,6 @@
{ {
"name": "@vben/web-antd", "name": "@vben/web-antd",
"version": "5.4.5", "version": "5.3.0-beta.1",
"homepage": "https://vben.pro", "homepage": "https://vben.pro",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": { "repository": {
@@ -40,11 +40,11 @@
"@vben/styles": "workspace:*", "@vben/styles": "workspace:*",
"@vben/types": "workspace:*", "@vben/types": "workspace:*",
"@vben/utils": "workspace:*", "@vben/utils": "workspace:*",
"@vueuse/core": "catalog:", "@vueuse/core": "^11.0.3",
"ant-design-vue": "catalog:", "ant-design-vue": "^4.2.3",
"dayjs": "catalog:", "dayjs": "^1.11.13",
"pinia": "catalog:", "pinia": "2.2.2",
"vue": "catalog:", "vue": "^3.5.4",
"vue-router": "catalog:" "vue-router": "^4.4.3"
} }
} }

View File

@@ -1,127 +0,0 @@
/**
* 通用组件共同的使用的基础组件,原先放在 adapter/form 内部,限制了使用范围,这里提取出来,方便其他地方使用
* 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
*/
import type { BaseFormComponentType } from '@vben/common-ui';
import type { Component, SetupContext } from 'vue';
import { h } from 'vue';
import { globalShareState } from '@vben/common-ui';
import { $t } from '@vben/locales';
import {
AutoComplete,
Button,
Checkbox,
CheckboxGroup,
DatePicker,
Divider,
Input,
InputNumber,
InputPassword,
Mentions,
notification,
Radio,
RadioGroup,
RangePicker,
Rate,
Select,
Space,
Switch,
Textarea,
TimePicker,
TreeSelect,
Upload,
} from 'ant-design-vue';
const withDefaultPlaceholder = <T extends Component>(
component: T,
type: 'input' | 'select',
) => {
return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
return h(component, { ...props, ...attrs, placeholder }, slots);
};
};
// 这里需要自行根据业务组件库进行适配,需要用到的组件都需要在这里类型说明
export type ComponentType =
| 'AutoComplete'
| 'Checkbox'
| 'CheckboxGroup'
| 'DatePicker'
| 'DefaultButton'
| 'Divider'
| 'Input'
| 'InputNumber'
| 'InputPassword'
| 'Mentions'
| 'PrimaryButton'
| 'Radio'
| 'RadioGroup'
| 'RangePicker'
| 'Rate'
| 'Select'
| 'Space'
| 'Switch'
| 'Textarea'
| 'TimePicker'
| 'TreeSelect'
| 'Upload'
| BaseFormComponentType;
async function initComponentAdapter() {
const components: Partial<Record<ComponentType, Component>> = {
// 如果你的组件体积比较大,可以使用异步加载
// Button: () =>
// import('xxx').then((res) => res.Button),
AutoComplete,
Checkbox,
CheckboxGroup,
DatePicker,
// 自定义默认按钮
DefaultButton: (props, { attrs, slots }) => {
return h(Button, { ...props, attrs, type: 'default' }, slots);
},
Divider,
Input: withDefaultPlaceholder(Input, 'input'),
InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
Mentions: withDefaultPlaceholder(Mentions, 'input'),
// 自定义主要按钮
PrimaryButton: (props, { attrs, slots }) => {
return h(Button, { ...props, attrs, type: 'primary' }, slots);
},
Radio,
RadioGroup,
RangePicker,
Rate,
Select: withDefaultPlaceholder(Select, 'select'),
Space,
Switch,
Textarea: withDefaultPlaceholder(Textarea, 'input'),
TimePicker,
TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
Upload,
};
// 将组件注册到全局共享状态中
globalShareState.setComponents(components);
// 定义全局共享状态中的消息提示
globalShareState.defineMessage({
// 复制成功消息提示
copyPreferencesSuccess: (title, content) => {
notification.success({
description: content,
message: title,
placement: 'bottomRight',
});
},
});
}
export { initComponentAdapter };

View File

@@ -1,19 +1,94 @@
import type { import type {
BaseFormComponentType,
VbenFormSchema as FormSchema, VbenFormSchema as FormSchema,
VbenFormProps, VbenFormProps,
} from '@vben/common-ui'; } from '@vben/common-ui';
import type { ComponentType } from './component'; import { h } from 'vue';
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
setupVbenForm<ComponentType>({ import {
config: { AutoComplete,
// ant design vue组件库默认都是 v-model:value Button,
baseModelPropName: 'value', Checkbox,
CheckboxGroup,
DatePicker,
Divider,
Input,
InputNumber,
InputPassword,
Mentions,
Radio,
RadioGroup,
RangePicker,
Rate,
Select,
Space,
Switch,
TimePicker,
TreeSelect,
Upload,
} from 'ant-design-vue';
// 一些组件是 v-model:checked 或者 v-model:fileList // 业务表单组件适配
export type FormComponentType =
| 'AutoComplete'
| 'Checkbox'
| 'CheckboxGroup'
| 'DatePicker'
| 'Divider'
| 'Input'
| 'InputNumber'
| 'InputPassword'
| 'Mentions'
| 'Radio'
| 'RadioGroup'
| 'RangePicker'
| 'Rate'
| 'Select'
| 'Space'
| 'Switch'
| 'TimePicker'
| 'TreeSelect'
| 'Upload'
| BaseFormComponentType;
// 初始化表单组件并注册到form组件内部
setupVbenForm<FormComponentType>({
components: {
AutoComplete,
Checkbox,
CheckboxGroup,
DatePicker,
// 自定义默认的重置按钮
DefaultResetActionButton: (props, { attrs, slots }) => {
return h(Button, { ...props, attrs, type: 'default' }, slots);
},
// 自定义默认的提交按钮
DefaultSubmitActionButton: (props, { attrs, slots }) => {
return h(Button, { ...props, attrs, type: 'primary' }, slots);
},
Divider,
Input,
InputNumber,
InputPassword,
Mentions,
Radio,
RadioGroup,
RangePicker,
Rate,
Select,
Space,
Switch,
TimePicker,
TreeSelect,
Upload,
},
config: {
baseModelPropName: 'value',
modelPropNameMap: { modelPropNameMap: {
Checkbox: 'checked', Checkbox: 'checked',
Radio: 'checked', Radio: 'checked',
@@ -22,26 +97,18 @@ setupVbenForm<ComponentType>({
}, },
}, },
defineRules: { defineRules: {
// 输入项目必填国际化适配
required: (value, _params, ctx) => { required: (value, _params, ctx) => {
if (value === undefined || value === null || value.length === 0) { if ((!value && value !== 0) || value.length === 0) {
return $t('ui.formRules.required', [ctx.label]); return $t('formRules.required', [ctx.label]);
}
return true;
},
// 选择项目必填国际化适配
selectRequired: (value, _params, ctx) => {
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
} }
return true; return true;
}, },
}, },
}); });
const useVbenForm = useForm<ComponentType>; const useVbenForm = useForm<FormComponentType>;
export { useVbenForm, z }; export { useVbenForm, z };
export type VbenFormSchema = FormSchema<ComponentType>; export type VbenFormSchema = FormSchema<FormComponentType>;
export type { VbenFormProps }; export type { VbenFormProps };

View File

@@ -0,0 +1 @@
export * from './form';

View File

@@ -1,67 +0,0 @@
import { h } from 'vue';
import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
import { Button, Image } from 'ant-design-vue';
import { useVbenForm } from './form';
setupVbenVxeTable({
configVxeTable: (vxeUI) => {
vxeUI.setConfig({
grid: {
align: 'center',
border: false,
columnConfig: {
resizable: true,
},
minHeight: 180,
formConfig: {
// 全局禁用vxe-table的表单配置使用formOptions
enabled: false,
},
proxyConfig: {
autoLoad: true,
response: {
result: 'items',
total: 'total',
list: 'items',
},
showActiveMsg: true,
showResponseMsg: false,
},
round: true,
showOverflow: true,
size: 'small',
},
});
// 表格配置项可以用 cellRender: { name: 'CellImage' },
vxeUI.renderer.add('CellImage', {
renderTableDefault(_renderOpts, params) {
const { column, row } = params;
return h(Image, { src: row[column.field] });
},
});
// 表格配置项可以用 cellRender: { name: 'CellLink' },
vxeUI.renderer.add('CellLink', {
renderTableDefault(renderOpts) {
const { props } = renderOpts;
return h(
Button,
{ size: 'small', type: 'link' },
{ default: () => props?.text },
);
},
});
// 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
// vxeUI.formats.add
},
useVbenForm,
});
export { useVbenVxeGrid };
export type * from '@vben/plugins/vxe-table';

View File

@@ -3,13 +3,17 @@ import { baseRequestClient, requestClient } from '#/api/request';
export namespace AuthApi { export namespace AuthApi {
/** 登录接口参数 */ /** 登录接口参数 */
export interface LoginParams { export interface LoginParams {
password?: string; password: string;
username?: string; username: string;
} }
/** 登录接口返回值 */ /** 登录接口返回值 */
export interface LoginResult { export interface LoginResult {
accessToken: string; accessToken: string;
desc: string;
realName: string;
userId: string;
username: string;
} }
export interface RefreshTokenResult { export interface RefreshTokenResult {

View File

@@ -1,8 +1,6 @@
/** /**
* 该文件可自行根据业务逻辑进行调整 * 该文件可自行根据业务逻辑进行调整
*/ */
import type { HttpResponse } from '@vben/request';
import { useAppConfig } from '@vben/hooks'; import { useAppConfig } from '@vben/hooks';
import { preferences } from '@vben/preferences'; import { preferences } from '@vben/preferences';
import { import {
@@ -70,16 +68,15 @@ function createRequestClient(baseURL: string) {
}); });
// response数据解构 // response数据解构
client.addResponseInterceptor<HttpResponse>({ client.addResponseInterceptor({
fulfilled: (response) => { fulfilled: (response) => {
const { data: responseData, status } = response; const { data: responseData, status } = response;
const { code, data } = responseData; const { code, data, message: msg } = responseData;
if (status >= 200 && status < 400 && code === 0) { if (status >= 200 && status < 400 && code === 0) {
return data; return data;
} }
throw new Error(`Error ${status}: ${msg}`);
throw Object.assign({}, response, { response });
}, },
}); });
@@ -96,14 +93,7 @@ function createRequestClient(baseURL: string) {
// 通用的错误处理,如果没有进入上面的错误处理逻辑,就会进入这里 // 通用的错误处理,如果没有进入上面的错误处理逻辑,就会进入这里
client.addResponseInterceptor( client.addResponseInterceptor(
errorMessageResponseInterceptor((msg: string, error) => { errorMessageResponseInterceptor((msg: string) => message.error(msg)),
// 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理,根据不同的 code 做不同的提示,而不是直接使用 message.error 提示 msg
// 当前mock接口返回的错误字段是 error 或者 message
const responseData = error?.response?.data ?? {};
const errorMessage = responseData?.error ?? responseData?.message ?? '';
// 如果没有错误信息,则会根据状态码进行提示
message.error(errorMessage || msg);
}),
); );
return client; return client;

View File

@@ -1,23 +1,16 @@
import { createApp, watchEffect } from 'vue'; import { createApp } from 'vue';
import { registerAccessDirective } from '@vben/access'; import { registerAccessDirective } from '@vben/access';
import { preferences } from '@vben/preferences';
import { initStores } from '@vben/stores'; import { initStores } from '@vben/stores';
import '@vben/styles'; import '@vben/styles';
import '@vben/styles/antd'; import '@vben/styles/antd';
import { useTitle } from '@vueuse/core'; import { setupI18n } from '#/locales';
import { $t, setupI18n } from '#/locales';
import { initComponentAdapter } from './adapter/component';
import App from './app.vue'; import App from './app.vue';
import { router } from './router'; import { router } from './router';
async function bootstrap(namespace: string) { async function bootstrap(namespace: string) {
// 初始化组件适配器
await initComponentAdapter();
const app = createApp(App); const app = createApp(App);
// 国际化 i18n 配置 // 国际化 i18n 配置
@@ -32,16 +25,6 @@ async function bootstrap(namespace: string) {
// 配置路由及路由守卫 // 配置路由及路由守卫
app.use(router); app.use(router);
// 动态更新标题
watchEffect(() => {
if (preferences.app.dynamicTitle) {
const routeTitle = router.currentRoute.value.meta?.title;
const pageTitle =
(routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
useTitle(pageTitle);
}
});
app.mount('#app'); app.mount('#app');
} }

View File

@@ -1,11 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { NotificationItem } from '@vben/layouts'; import type { NotificationItem } from '@vben/layouts';
import { computed, ref, watch } from 'vue'; import { computed, ref } from 'vue';
import { AuthenticationLoginExpiredModal } from '@vben/common-ui'; import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants'; import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
import { useWatermark } from '@vben/hooks';
import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons'; import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
import { import {
BasicLayout, BasicLayout,
@@ -55,7 +54,6 @@ const notifications = ref<NotificationItem[]>([
const userStore = useUserStore(); const userStore = useUserStore();
const authStore = useAuthStore(); const authStore = useAuthStore();
const accessStore = useAccessStore(); const accessStore = useAccessStore();
const { destroyWatermark, updateWatermark } = useWatermark();
const showDot = computed(() => const showDot = computed(() =>
notifications.value.some((item) => !item.isRead), notifications.value.some((item) => !item.isRead),
); );
@@ -68,7 +66,7 @@ const menus = computed(() => [
}); });
}, },
icon: BookOpenText, icon: BookOpenText,
text: $t('ui.widgets.document'), text: $t('widgets.document'),
}, },
{ {
handler: () => { handler: () => {
@@ -86,7 +84,7 @@ const menus = computed(() => [
}); });
}, },
icon: CircleHelp, icon: CircleHelp,
text: $t('ui.widgets.qa'), text: $t('widgets.qa'),
}, },
]); ]);
@@ -105,21 +103,6 @@ function handleNoticeClear() {
function handleMakeAll() { function handleMakeAll() {
notifications.value.forEach((item) => (item.isRead = true)); notifications.value.forEach((item) => (item.isRead = true));
} }
watch(
() => preferences.app.watermark,
async (enable) => {
if (enable) {
await updateWatermark({
content: `${userStore.userInfo?.username}`,
});
} else {
destroyWatermark();
}
},
{
immediate: true,
},
);
</script> </script>
<template> <template>

View File

@@ -4,11 +4,7 @@ import type { Locale } from 'ant-design-vue/es/locale';
import type { App } from 'vue'; import type { App } from 'vue';
import { ref } from 'vue'; import { ref } from 'vue';
import { import { $t, setupI18n as coreSetup, loadLocalesMap } from '@vben/locales';
$t,
setupI18n as coreSetup,
loadLocalesMapFromDir,
} from '@vben/locales';
import { preferences } from '@vben/preferences'; import { preferences } from '@vben/preferences';
import antdEnLocale from 'ant-design-vue/es/locale/en_US'; import antdEnLocale from 'ant-design-vue/es/locale/en_US';
@@ -17,12 +13,10 @@ import dayjs from 'dayjs';
const antdLocale = ref<Locale>(antdDefaultLocale); const antdLocale = ref<Locale>(antdDefaultLocale);
const modules = import.meta.glob('./langs/**/*.json'); const modules = import.meta.glob('./langs/*.json');
const localesMap = loadLocalesMap(modules);
const localesMap = loadLocalesMapFromDir(
/\.\/langs\/([^/]+)\/(.*)\.json$/,
modules,
);
/** /**
* 加载应用特有的语言包 * 加载应用特有的语言包
* 这里也可以改造为从服务端获取翻译数据 * 这里也可以改造为从服务端获取翻译数据
@@ -51,14 +45,14 @@ async function loadThirdPartyMessage(lang: SupportedLanguagesType) {
async function loadDayjsLocale(lang: SupportedLanguagesType) { async function loadDayjsLocale(lang: SupportedLanguagesType) {
let locale; let locale;
switch (lang) { switch (lang) {
case 'en-US': {
locale = await import('dayjs/locale/en');
break;
}
case 'zh-CN': { case 'zh-CN': {
locale = await import('dayjs/locale/zh-cn'); locale = await import('dayjs/locale/zh-cn');
break; break;
} }
case 'en-US': {
locale = await import('dayjs/locale/en');
break;
}
// 默认使用英语 // 默认使用英语
default: { default: {
locale = await import('dayjs/locale/en'); locale = await import('dayjs/locale/en');
@@ -77,14 +71,14 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
*/ */
async function loadAntdLocale(lang: SupportedLanguagesType) { async function loadAntdLocale(lang: SupportedLanguagesType) {
switch (lang) { switch (lang) {
case 'en-US': {
antdLocale.value = antdEnLocale;
break;
}
case 'zh-CN': { case 'zh-CN': {
antdLocale.value = antdDefaultLocale; antdLocale.value = antdDefaultLocale;
break; break;
} }
case 'en-US': {
antdLocale.value = antdEnLocale;
break;
}
} }
} }

View File

@@ -0,0 +1,8 @@
{
"page": {
"demos": {
"title": "Demos",
"antd": "Ant Design Vue"
}
}
}

View File

@@ -1,12 +0,0 @@
{
"title": "Demos",
"antd": "Ant Design Vue",
"vben": {
"title": "Project",
"about": "About",
"document": "Document",
"antdv": "Ant Design Vue Version",
"naive-ui": "Naive UI Version",
"element-plus": "Element Plus Version"
}
}

View File

@@ -1,14 +0,0 @@
{
"auth": {
"login": "Login",
"register": "Register",
"codeLogin": "Code Login",
"qrcodeLogin": "Qr Code Login",
"forgetPassword": "Forget Password"
},
"dashboard": {
"title": "Dashboard",
"analytics": "Analytics",
"workspace": "Workspace"
}
}

View File

@@ -0,0 +1,8 @@
{
"page": {
"demos": {
"title": "演示",
"antd": "Ant Design Vue"
}
}
}

View File

@@ -1,12 +0,0 @@
{
"title": "演示",
"antd": "Ant Design Vue",
"vben": {
"title": "项目",
"about": "关于",
"document": "文档",
"antdv": "Ant Design Vue 版本",
"naive-ui": "Naive UI 版本",
"element-plus": "Element Plus 版本"
}
}

View File

@@ -1,14 +0,0 @@
{
"auth": {
"login": "登录",
"register": "注册",
"codeLogin": "验证码登录",
"qrcodeLogin": "二维码登录",
"forgetPassword": "忘记密码"
},
"dashboard": {
"title": "概览",
"analytics": "分析页",
"workspace": "工作台"
}
}

View File

@@ -3,7 +3,6 @@ import { defineOverridesPreferences } from '@vben/preferences';
/** /**
* @description 项目配置文件 * @description 项目配置文件
* 只需要覆盖项目中的一部分配置,不需要的配置不用覆盖,会自动使用默认配置 * 只需要覆盖项目中的一部分配置,不需要的配置不用覆盖,会自动使用默认配置
* !!! 更改配置后请清空缓存,否则可能不生效
*/ */
export const overridesPreferences = defineOverridesPreferences({ export const overridesPreferences = defineOverridesPreferences({
// overrides // overrides

View File

@@ -5,7 +5,10 @@ import { preferences } from '@vben/preferences';
import { useAccessStore, useUserStore } from '@vben/stores'; import { useAccessStore, useUserStore } from '@vben/stores';
import { startProgress, stopProgress } from '@vben/utils'; import { startProgress, stopProgress } from '@vben/utils';
import { accessRoutes, coreRouteNames } from '#/router/routes'; import { useTitle } from '@vueuse/core';
import { $t } from '#/locales';
import { coreRouteNames, dynamicRoutes } from '#/router/routes';
import { useAuthStore } from '#/store'; import { useAuthStore } from '#/store';
import { generateAccess } from './access'; import { generateAccess } from './access';
@@ -31,12 +34,21 @@ function setupCommonGuard(router: Router) {
router.afterEach((to) => { router.afterEach((to) => {
// 记录页面是否加载,如果已经加载,后续的页面切换动画等效果不在重复执行 // 记录页面是否加载,如果已经加载,后续的页面切换动画等效果不在重复执行
loadedPaths.add(to.path); if (preferences.tabbar.enable) {
loadedPaths.add(to.path);
}
// 关闭页面加载进度条 // 关闭页面加载进度条
if (preferences.transition.progress) { if (preferences.transition.progress) {
stopProgress(); stopProgress();
} }
// 动态修改标题
if (preferences.app.dynamicTitle) {
const { title } = to.meta;
// useTitle(`${$t(title)} - ${preferences.app.name}`);
useTitle(`${$t(title)} - ${preferences.app.name}`);
}
}); });
} }
@@ -95,7 +107,7 @@ function setupAccessGuard(router: Router) {
roles: userRoles, roles: userRoles,
router, router,
// 则会在菜单中显示但是访问会被重定向到403 // 则会在菜单中显示但是访问会被重定向到403
routes: accessRoutes, routes: dynamicRoutes,
}); });
// 保存菜单信息和路由信息 // 保存菜单信息和路由信息

View File

@@ -19,12 +19,7 @@ const router = createRouter({
: createWebHistory(import.meta.env.VITE_BASE), : createWebHistory(import.meta.env.VITE_BASE),
// 应该添加到路由的初始路由列表。 // 应该添加到路由的初始路由列表。
routes, routes,
scrollBehavior: (to, _from, savedPosition) => { scrollBehavior: () => ({ left: 0, top: 0 }),
if (savedPosition) {
return savedPosition;
}
return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
},
// 是否应该禁止尾部斜杠。 // 是否应该禁止尾部斜杠。
// strict: true, // strict: true,
}); });

View File

@@ -1,6 +1,6 @@
import type { RouteRecordRaw } from 'vue-router'; import type { RouteRecordRaw } from 'vue-router';
import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants'; import { DEFAULT_HOME_PATH } from '@vben/constants';
import { AuthPageLayout } from '#/layouts'; import { AuthPageLayout } from '#/layouts';
import { $t } from '#/locales'; import { $t } from '#/locales';
@@ -32,19 +32,17 @@ const coreRoutes: RouteRecordRaw[] = [
{ {
component: AuthPageLayout, component: AuthPageLayout,
meta: { meta: {
hideInTab: true,
title: 'Authentication', title: 'Authentication',
}, },
name: 'Authentication', name: 'Authentication',
path: '/auth', path: '/auth',
redirect: LOGIN_PATH,
children: [ children: [
{ {
name: 'Login', name: 'Login',
path: 'login', path: 'login',
component: Login, component: Login,
meta: { meta: {
title: $t('page.auth.login'), title: $t('page.core.login'),
}, },
}, },
{ {
@@ -52,7 +50,7 @@ const coreRoutes: RouteRecordRaw[] = [
path: 'code-login', path: 'code-login',
component: () => import('#/views/_core/authentication/code-login.vue'), component: () => import('#/views/_core/authentication/code-login.vue'),
meta: { meta: {
title: $t('page.auth.codeLogin'), title: $t('page.core.codeLogin'),
}, },
}, },
{ {
@@ -61,7 +59,7 @@ const coreRoutes: RouteRecordRaw[] = [
component: () => component: () =>
import('#/views/_core/authentication/qrcode-login.vue'), import('#/views/_core/authentication/qrcode-login.vue'),
meta: { meta: {
title: $t('page.auth.qrcodeLogin'), title: $t('page.core.qrcodeLogin'),
}, },
}, },
{ {
@@ -70,7 +68,7 @@ const coreRoutes: RouteRecordRaw[] = [
component: () => component: () =>
import('#/views/_core/authentication/forget-password.vue'), import('#/views/_core/authentication/forget-password.vue'),
meta: { meta: {
title: $t('page.auth.forgetPassword'), title: $t('page.core.forgetPassword'),
}, },
}, },
{ {
@@ -78,7 +76,7 @@ const coreRoutes: RouteRecordRaw[] = [
path: 'register', path: 'register',
component: () => import('#/views/_core/authentication/register.vue'), component: () => import('#/views/_core/authentication/register.vue'),
meta: { meta: {
title: $t('page.auth.register'), title: $t('page.core.register'),
}, },
}, },
], ],

View File

@@ -10,16 +10,12 @@ const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
// 有需要可以自行打开注释,并创建文件夹 // 有需要可以自行打开注释,并创建文件夹
// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true }); // const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
/** 动态路由 */ /** 动态路由 */
const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles); const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
/** 外部路由列表访问这些页面可以不需要Layout可能用于内嵌在别的系统(不会显示在菜单中) */ /** 外部路由列表访问这些页面可以不需要Layout可能用于内嵌在别的系统 */
// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles); // const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
/** 不需要权限的菜单列表(会显示在菜单中) */
// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
const staticRoutes: RouteRecordRaw[] = [];
const externalRoutes: RouteRecordRaw[] = []; const externalRoutes: RouteRecordRaw[] = [];
/** 路由列表,由基本路由+静态路由组成 */ /** 路由列表,由基本路由+静态路由组成 */
@@ -32,5 +28,4 @@ const routes: RouteRecordRaw[] = [
/** 基本路由列表,这些路由不需要进入权限拦截 */ /** 基本路由列表,这些路由不需要进入权限拦截 */
const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name); const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);
const accessRoutes = [...dynamicRoutes, ...staticRoutes]; export { coreRouteNames, dynamicRoutes, routes };
export { accessRoutes, coreRouteNames, routes };

View File

@@ -29,7 +29,6 @@ const routes: RouteRecordRaw[] = [
path: '/workspace', path: '/workspace',
component: () => import('#/views/dashboard/workspace/index.vue'), component: () => import('#/views/dashboard/workspace/index.vue'),
meta: { meta: {
icon: 'carbon:workspace',
title: $t('page.dashboard.workspace'), title: $t('page.dashboard.workspace'),
}, },
}, },

View File

@@ -10,14 +10,14 @@ const routes: RouteRecordRaw[] = [
icon: 'ic:baseline-view-in-ar', icon: 'ic:baseline-view-in-ar',
keepAlive: true, keepAlive: true,
order: 1000, order: 1000,
title: $t('demos.title'), title: $t('page.demos.title'),
}, },
name: 'Demos', name: 'Demos',
path: '/demos', path: '/demos',
children: [ children: [
{ {
meta: { meta: {
title: $t('demos.antd'), title: $t('page.demos.antd'),
}, },
name: 'AntDesignDemos', name: 'AntDesignDemos',
path: '/demos/ant-design', path: '/demos/ant-design',

View File

@@ -18,7 +18,7 @@ const routes: RouteRecordRaw[] = [
badgeType: 'dot', badgeType: 'dot',
icon: VBEN_LOGO_URL, icon: VBEN_LOGO_URL,
order: 9999, order: 9999,
title: $t('demos.vben.title'), title: $t('page.vben.title'),
}, },
name: 'VbenProject', name: 'VbenProject',
path: '/vben-admin', path: '/vben-admin',
@@ -29,7 +29,7 @@ const routes: RouteRecordRaw[] = [
component: () => import('#/views/_core/about/index.vue'), component: () => import('#/views/_core/about/index.vue'),
meta: { meta: {
icon: 'lucide:copyright', icon: 'lucide:copyright',
title: $t('demos.vben.about'), title: $t('page.vben.about'),
}, },
}, },
{ {
@@ -39,7 +39,7 @@ const routes: RouteRecordRaw[] = [
meta: { meta: {
icon: 'lucide:book-open-text', icon: 'lucide:book-open-text',
link: VBEN_DOC_URL, link: VBEN_DOC_URL,
title: $t('demos.vben.document'), title: $t('page.vben.document'),
}, },
}, },
{ {
@@ -58,9 +58,8 @@ const routes: RouteRecordRaw[] = [
component: IFrameView, component: IFrameView,
meta: { meta: {
badgeType: 'dot', badgeType: 'dot',
icon: 'logos:naiveui',
link: VBEN_NAIVE_PREVIEW_URL, link: VBEN_NAIVE_PREVIEW_URL,
title: $t('demos.vben.naive-ui'), title: $t('page.vben.naive-ui'),
}, },
}, },
{ {
@@ -69,9 +68,8 @@ const routes: RouteRecordRaw[] = [
component: IFrameView, component: IFrameView,
meta: { meta: {
badgeType: 'dot', badgeType: 'dot',
icon: 'logos:element',
link: VBEN_ELE_PREVIEW_URL, link: VBEN_ELE_PREVIEW_URL,
title: $t('demos.vben.element-plus'), title: $t('page.vben.element-plus'),
}, },
}, },
], ],

View File

@@ -1,4 +1,5 @@
import type { Recordable, UserInfo } from '@vben/types'; import type { LoginAndRegisterParams } from '@vben/common-ui';
import type { UserInfo } from '@vben/types';
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@@ -25,7 +26,7 @@ export const useAuthStore = defineStore('auth', () => {
* @param params 登录表单数据 * @param params 登录表单数据
*/ */
async function authLogin( async function authLogin(
params: Recordable<any>, params: LoginAndRegisterParams,
onSuccess?: () => Promise<void> | void, onSuccess?: () => Promise<void> | void,
) { ) {
// 异步处理用户登录操作并获取 accessToken // 异步处理用户登录操作并获取 accessToken
@@ -75,15 +76,11 @@ export const useAuthStore = defineStore('auth', () => {
} }
async function logout(redirect: boolean = true) { async function logout(redirect: boolean = true) {
try { await logoutApi();
await logoutApi();
} catch {
// 不做任何处理
}
resetAllStores(); resetAllStores();
accessStore.setLoginExpired(false); accessStore.setLoginExpired(false);
// 回登页带上当前路由地址 // 回登页带上当前路由地址
await router.replace({ await router.replace({
path: LOGIN_PATH, path: LOGIN_PATH,
query: redirect query: redirect

View File

@@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui'; import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
import type { Recordable } from '@vben/types';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
@@ -50,7 +49,7 @@ const formSchema = computed((): VbenFormSchema[] => {
* Asynchronously handle the login process * Asynchronously handle the login process
* @param values 登录表单数据 * @param values 登录表单数据
*/ */
async function handleLogin(values: Recordable<any>) { async function handleLogin(values: LoginCodeParams) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log(values); console.log(values);
} }

View File

@@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui'; import type { VbenFormSchema } from '@vben/common-ui';
import type { Recordable } from '@vben/types';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
@@ -28,7 +27,7 @@ const formSchema = computed((): VbenFormSchema[] => {
]; ];
}); });
function handleSubmit(value: Recordable<any>) { function handleSubmit(value: string) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log('reset email:', value); console.log('reset email:', value);
} }

View File

@@ -2,9 +2,9 @@
import type { VbenFormSchema } from '@vben/common-ui'; import type { VbenFormSchema } from '@vben/common-ui';
import type { BasicOption } from '@vben/types'; import type { BasicOption } from '@vben/types';
import { computed, markRaw } from 'vue'; import { computed } from 'vue';
import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui'; import { AuthenticationLogin, z } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
import { useAuthStore } from '#/store'; import { useAuthStore } from '#/store';
@@ -15,15 +15,15 @@ const authStore = useAuthStore();
const MOCK_USER_OPTIONS: BasicOption[] = [ const MOCK_USER_OPTIONS: BasicOption[] = [
{ {
label: 'Super', label: '超级管理员',
value: 'vben', value: 'vben',
}, },
{ {
label: 'Admin', label: '管理员',
value: 'admin', value: 'admin',
}, },
{ {
label: 'User', label: '用户',
value: 'jack', value: 'jack',
}, },
]; ];
@@ -78,13 +78,6 @@ const formSchema = computed((): VbenFormSchema[] => {
label: $t('authentication.password'), label: $t('authentication.password'),
rules: z.string().min(1, { message: $t('authentication.passwordTip') }), rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
}, },
{
component: markRaw(SliderCaptcha),
fieldName: 'captcha',
rules: z.boolean().refine((value) => value, {
message: $t('authentication.verifyRequiredTip'),
}),
},
]; ];
}); });
</script> </script>

View File

@@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui'; import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
import type { Recordable } from '@vben/types';
import { computed, h, ref } from 'vue'; import { computed, h, ref } from 'vue';
@@ -46,7 +45,7 @@ const formSchema = computed((): VbenFormSchema[] => {
rules(values) { rules(values) {
const { password } = values; const { password } = values;
return z return z
.string({ required_error: $t('authentication.passwordTip') }) .string()
.min(1, { message: $t('authentication.passwordTip') }) .min(1, { message: $t('authentication.passwordTip') })
.refine((value) => value === password, { .refine((value) => value === password, {
message: $t('authentication.confirmPasswordTip'), message: $t('authentication.confirmPasswordTip'),
@@ -56,6 +55,7 @@ const formSchema = computed((): VbenFormSchema[] => {
}, },
fieldName: 'confirmPassword', fieldName: 'confirmPassword',
label: $t('authentication.confirmPassword'), label: $t('authentication.confirmPassword'),
rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
}, },
{ {
component: 'VbenCheckbox', component: 'VbenCheckbox',
@@ -67,10 +67,15 @@ const formSchema = computed((): VbenFormSchema[] => {
h( h(
'a', 'a',
{ {
class: 'vben-link ml-1 ', class:
'cursor-pointer text-primary ml-1 hover:text-primary-hover',
href: '', href: '',
}, },
`${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`, [
$t('authentication.privacyPolicy'),
'&',
$t('authentication.terms'),
],
), ),
]), ]),
}), }),
@@ -81,7 +86,7 @@ const formSchema = computed((): VbenFormSchema[] => {
]; ];
}); });
function handleSubmit(value: Recordable<any>) { function handleSubmit(value: LoginAndRegisterParams) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log('register submit:', value); console.log('register submit:', value);
} }

View File

@@ -7,7 +7,6 @@ import type {
} from '@vben/common-ui'; } from '@vben/common-ui';
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { import {
AnalysisChartCard, AnalysisChartCard,
@@ -19,15 +18,11 @@ import {
} from '@vben/common-ui'; } from '@vben/common-ui';
import { preferences } from '@vben/preferences'; import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores'; import { useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils';
import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue'; import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
const userStore = useUserStore(); const userStore = useUserStore();
// 这是一个示例数据,实际项目中需要根据实际情况进行调整
// url 也可以是内部路由,在 navTo 方法中识别处理,进行内部跳转
// 例如url: /dashboard/workspace
const projectItems: WorkbenchProjectItem[] = [ const projectItems: WorkbenchProjectItem[] = [
{ {
color: '', color: '',
@@ -36,7 +31,6 @@ const projectItems: WorkbenchProjectItem[] = [
group: '开源组', group: '开源组',
icon: 'carbon:logo-github', icon: 'carbon:logo-github',
title: 'Github', title: 'Github',
url: 'https://github.com',
}, },
{ {
color: '#3fb27f', color: '#3fb27f',
@@ -45,7 +39,6 @@ const projectItems: WorkbenchProjectItem[] = [
group: '算法组', group: '算法组',
icon: 'ion:logo-vue', icon: 'ion:logo-vue',
title: 'Vue', title: 'Vue',
url: 'https://vuejs.org',
}, },
{ {
color: '#e18525', color: '#e18525',
@@ -54,7 +47,6 @@ const projectItems: WorkbenchProjectItem[] = [
group: '上班摸鱼', group: '上班摸鱼',
icon: 'ion:logo-html5', icon: 'ion:logo-html5',
title: 'Html5', title: 'Html5',
url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
}, },
{ {
color: '#bf0c2c', color: '#bf0c2c',
@@ -63,7 +55,6 @@ const projectItems: WorkbenchProjectItem[] = [
group: 'UI', group: 'UI',
icon: 'ion:logo-angular', icon: 'ion:logo-angular',
title: 'Angular', title: 'Angular',
url: 'https://angular.io',
}, },
{ {
color: '#00d8ff', color: '#00d8ff',
@@ -72,7 +63,6 @@ const projectItems: WorkbenchProjectItem[] = [
group: '技术牛', group: '技术牛',
icon: 'bx:bxl-react', icon: 'bx:bxl-react',
title: 'React', title: 'React',
url: 'https://reactjs.org',
}, },
{ {
color: '#EBD94E', color: '#EBD94E',
@@ -81,47 +71,39 @@ const projectItems: WorkbenchProjectItem[] = [
group: '架构组', group: '架构组',
icon: 'ion:logo-javascript', icon: 'ion:logo-javascript',
title: 'Js', title: 'Js',
url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript',
}, },
]; ];
// 同样,这里的 url 也可以使用以 http 开头的外部链接
const quickNavItems: WorkbenchQuickNavItem[] = [ const quickNavItems: WorkbenchQuickNavItem[] = [
{ {
color: '#1fdaca', color: '#1fdaca',
icon: 'ion:home-outline', icon: 'ion:home-outline',
title: '首页', title: '首页',
url: '/',
}, },
{ {
color: '#bf0c2c', color: '#bf0c2c',
icon: 'ion:grid-outline', icon: 'ion:grid-outline',
title: '仪表盘', title: '仪表盘',
url: '/dashboard',
}, },
{ {
color: '#e18525', color: '#e18525',
icon: 'ion:layers-outline', icon: 'ion:layers-outline',
title: '组件', title: '组件',
url: '/demos/features/icons',
}, },
{ {
color: '#3fb27f', color: '#3fb27f',
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
title: '系统管理', title: '系统管理',
url: '/demos/features/login-expired', // 这里的 URL 是示例,实际项目中需要根据实际情况进行调整
}, },
{ {
color: '#4daf1bc9', color: '#4daf1bc9',
icon: 'ion:key-outline', icon: 'ion:key-outline',
title: '权限管理', title: '权限管理',
url: '/demos/access/page-control',
}, },
{ {
color: '#00d8ff', color: '#00d8ff',
icon: 'ion:bar-chart-outline', icon: 'ion:bar-chart-outline',
title: '图表', title: '图表',
url: '/analytics',
}, },
]; ];
@@ -213,24 +195,6 @@ const trendItems: WorkbenchTrendItem[] = [
title: 'Vben', title: 'Vben',
}, },
]; ];
const router = useRouter();
// 这是一个示例方法,实际项目中需要根据实际情况进行调整
// This is a sample method, adjust according to the actual project requirements
function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
if (nav.url?.startsWith('http')) {
openWindow(nav.url);
return;
}
if (nav.url?.startsWith('/')) {
router.push(nav.url).catch((error) => {
console.error('Navigation failed:', error);
});
} else {
console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
}
}
</script> </script>
<template> <template>
@@ -246,7 +210,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
<div class="mt-5 flex flex-col lg:flex-row"> <div class="mt-5 flex flex-col lg:flex-row">
<div class="mr-4 w-full lg:w-3/5"> <div class="mr-4 w-full lg:w-3/5">
<WorkbenchProject :items="projectItems" title="项目" @click="navTo" /> <WorkbenchProject :items="projectItems" title="项目" />
<WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" /> <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
</div> </div>
<div class="w-full lg:w-2/5"> <div class="w-full lg:w-2/5">
@@ -254,7 +218,6 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
:items="quickNavItems" :items="quickNavItems"
class="mt-5 lg:mt-0" class="mt-5 lg:mt-0"
title="快捷导航" title="快捷导航"
@click="navTo"
/> />
<WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" /> <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
<AnalysisChartCard class="mt-5" title="访问来源"> <AnalysisChartCard class="mt-5" title="访问来源">

View File

@@ -1,6 +1,6 @@
{ {
"name": "@vben/web-ele", "name": "@vben/web-ele",
"version": "5.4.5", "version": "5.3.0-beta.1",
"homepage": "https://vben.pro", "homepage": "https://vben.pro",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": { "repository": {
@@ -40,14 +40,14 @@
"@vben/styles": "workspace:*", "@vben/styles": "workspace:*",
"@vben/types": "workspace:*", "@vben/types": "workspace:*",
"@vben/utils": "workspace:*", "@vben/utils": "workspace:*",
"@vueuse/core": "catalog:", "@vueuse/core": "^11.0.3",
"dayjs": "catalog:", "dayjs": "^1.11.13",
"element-plus": "catalog:", "element-plus": "^2.8.2",
"pinia": "catalog:", "pinia": "2.2.2",
"vue": "catalog:", "vue": "^3.5.4",
"vue-router": "catalog:" "vue-router": "^4.4.3"
}, },
"devDependencies": { "devDependencies": {
"unplugin-element-plus": "catalog:" "unplugin-element-plus": "^0.8.0"
} }
} }

View File

@@ -1,104 +0,0 @@
/**
* 通用组件共同的使用的基础组件,原先放在 adapter/form 内部,限制了使用范围,这里提取出来,方便其他地方使用
* 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
*/
import type { BaseFormComponentType } from '@vben/common-ui';
import type { Component, SetupContext } from 'vue';
import { h } from 'vue';
import { globalShareState } from '@vben/common-ui';
import { $t } from '@vben/locales';
import {
ElButton,
ElCheckbox,
ElCheckboxGroup,
ElDivider,
ElInput,
ElInputNumber,
ElNotification,
ElRadioGroup,
ElSelect,
ElSpace,
ElSwitch,
ElTimePicker,
ElTreeSelect,
ElUpload,
} from 'element-plus';
const withDefaultPlaceholder = <T extends Component>(
component: T,
type: 'input' | 'select',
) => {
return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
return h(component, { ...props, ...attrs, placeholder }, slots);
};
};
// 这里需要自行根据业务组件库进行适配,需要用到的组件都需要在这里类型说明
export type ComponentType =
| 'Checkbox'
| 'CheckboxGroup'
| 'DatePicker'
| 'Divider'
| 'Input'
| 'InputNumber'
| 'RadioGroup'
| 'Select'
| 'Space'
| 'Switch'
| 'TimePicker'
| 'TreeSelect'
| 'Upload'
| BaseFormComponentType;
async function initComponentAdapter() {
const components: Partial<Record<ComponentType, Component>> = {
// 如果你的组件体积比较大,可以使用异步加载
// Button: () =>
// import('xxx').then((res) => res.Button),
Checkbox: ElCheckbox,
CheckboxGroup: ElCheckboxGroup,
// 自定义默认按钮
DefaulButton: (props, { attrs, slots }) => {
return h(ElButton, { ...props, attrs, type: 'info' }, slots);
},
// 自定义主要按钮
PrimaryButton: (props, { attrs, slots }) => {
return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
},
Divider: ElDivider,
Input: withDefaultPlaceholder(ElInput, 'input'),
InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
RadioGroup: ElRadioGroup,
Select: withDefaultPlaceholder(ElSelect, 'select'),
Space: ElSpace,
Switch: ElSwitch,
TimePicker: ElTimePicker,
TreeSelect: withDefaultPlaceholder(ElTreeSelect, 'select'),
Upload: ElUpload,
};
// 将组件注册到全局共享状态中
globalShareState.setComponents(components);
// 定义全局共享状态中的消息提示
globalShareState.defineMessage({
// 复制成功消息提示
copyPreferencesSuccess: (title, content) => {
ElNotification({
title,
message: content,
position: 'bottom-right',
duration: 0,
type: 'success',
});
},
});
}
export { initComponentAdapter };

View File

@@ -1,14 +1,71 @@
import type { import type {
BaseFormComponentType,
VbenFormSchema as FormSchema, VbenFormSchema as FormSchema,
VbenFormProps, VbenFormProps,
} from '@vben/common-ui'; } from '@vben/common-ui';
import type { ComponentType } from './component'; import { h } from 'vue';
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
setupVbenForm<ComponentType>({ import {
ElButton,
ElCheckbox,
ElCheckboxGroup,
ElDivider,
ElInput,
ElInputNumber,
ElRadioGroup,
ElSelect,
ElSpace,
ElSwitch,
ElTimePicker,
ElTreeSelect,
ElUpload,
} from 'element-plus';
// 业务表单组件适配
export type FormComponentType =
| 'Checkbox'
| 'CheckboxGroup'
| 'DatePicker'
| 'Divider'
| 'Input'
| 'InputNumber'
| 'RadioGroup'
| 'Select'
| 'Space'
| 'Switch'
| 'TimePicker'
| 'TreeSelect'
| 'Upload'
| BaseFormComponentType;
// 初始化表单组件并注册到form组件内部
setupVbenForm<FormComponentType>({
components: {
Checkbox: ElCheckbox,
CheckboxGroup: ElCheckboxGroup,
// 自定义默认的重置按钮
DefaultResetActionButton: (props, { attrs, slots }) => {
return h(ElButton, { ...props, attrs, type: 'info' }, slots);
},
// 自定义默认的提交按钮
DefaultSubmitActionButton: (props, { attrs, slots }) => {
return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
},
Divider: ElDivider,
Input: ElInput,
InputNumber: ElInputNumber,
RadioGroup: ElRadioGroup,
Select: ElSelect,
Space: ElSpace,
Switch: ElSwitch,
TimePicker: ElTimePicker,
TreeSelect: ElTreeSelect,
Upload: ElUpload,
},
config: { config: {
modelPropNameMap: { modelPropNameMap: {
Upload: 'fileList', Upload: 'fileList',
@@ -16,23 +73,17 @@ setupVbenForm<ComponentType>({
}, },
defineRules: { defineRules: {
required: (value, _params, ctx) => { required: (value, _params, ctx) => {
if (value === undefined || value === null || value.length === 0) { if ((!value && value !== 0) || value.length === 0) {
return $t('ui.formRules.required', [ctx.label]); return $t('formRules.required', [ctx.label]);
}
return true;
},
selectRequired: (value, _params, ctx) => {
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
} }
return true; return true;
}, },
}, },
}); });
const useVbenForm = useForm<ComponentType>; const useVbenForm = useForm<FormComponentType>;
export { useVbenForm, z }; export { useVbenForm, z };
export type VbenFormSchema = FormSchema<ComponentType>; export type VbenFormSchema = FormSchema<FormComponentType>;
export type { VbenFormProps }; export type { VbenFormProps };

View File

@@ -0,0 +1 @@
export * from './form';

View File

@@ -1,68 +0,0 @@
import { h } from 'vue';
import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
import { ElButton, ElImage } from 'element-plus';
import { useVbenForm } from './form';
setupVbenVxeTable({
configVxeTable: (vxeUI) => {
vxeUI.setConfig({
grid: {
align: 'center',
border: false,
columnConfig: {
resizable: true,
},
minHeight: 180,
formConfig: {
// 全局禁用vxe-table的表单配置使用formOptions
enabled: false,
},
proxyConfig: {
autoLoad: true,
response: {
result: 'items',
total: 'total',
list: 'items',
},
showActiveMsg: true,
showResponseMsg: false,
},
round: true,
showOverflow: true,
size: 'small',
},
});
// 表格配置项可以用 cellRender: { name: 'CellImage' },
vxeUI.renderer.add('CellImage', {
renderTableDefault(_renderOpts, params) {
const { column, row } = params;
const src = row[column.field];
return h(ElImage, { src, previewSrcList: [src] });
},
});
// 表格配置项可以用 cellRender: { name: 'CellLink' },
vxeUI.renderer.add('CellLink', {
renderTableDefault(renderOpts) {
const { props } = renderOpts;
return h(
ElButton,
{ size: 'small', link: true },
{ default: () => props?.text },
);
},
});
// 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
// vxeUI.formats.add
},
useVbenForm,
});
export { useVbenVxeGrid };
export type * from '@vben/plugins/vxe-table';

View File

@@ -3,13 +3,17 @@ import { baseRequestClient, requestClient } from '#/api/request';
export namespace AuthApi { export namespace AuthApi {
/** 登录接口参数 */ /** 登录接口参数 */
export interface LoginParams { export interface LoginParams {
password?: string; password: string;
username?: string; username: string;
} }
/** 登录接口返回值 */ /** 登录接口返回值 */
export interface LoginResult { export interface LoginResult {
accessToken: string; accessToken: string;
desc: string;
realName: string;
userId: string;
username: string;
} }
export interface RefreshTokenResult { export interface RefreshTokenResult {

View File

@@ -1,8 +1,6 @@
/** /**
* 该文件可自行根据业务逻辑进行调整 * 该文件可自行根据业务逻辑进行调整
*/ */
import type { HttpResponse } from '@vben/request';
import { useAppConfig } from '@vben/hooks'; import { useAppConfig } from '@vben/hooks';
import { preferences } from '@vben/preferences'; import { preferences } from '@vben/preferences';
import { import {
@@ -70,15 +68,15 @@ function createRequestClient(baseURL: string) {
}); });
// response数据解构 // response数据解构
client.addResponseInterceptor<HttpResponse>({ client.addResponseInterceptor({
fulfilled: (response) => { fulfilled: (response) => {
const { data: responseData, status } = response; const { data: responseData, status } = response;
const { code, data } = responseData; const { code, data, message: msg } = responseData;
if (status >= 200 && status < 400 && code === 0) { if (status >= 200 && status < 400 && code === 0) {
return data; return data;
} }
throw Object.assign({}, response, { response }); throw new Error(`Error ${status}: ${msg}`);
}, },
}); });
@@ -95,14 +93,7 @@ function createRequestClient(baseURL: string) {
// 通用的错误处理,如果没有进入上面的错误处理逻辑,就会进入这里 // 通用的错误处理,如果没有进入上面的错误处理逻辑,就会进入这里
client.addResponseInterceptor( client.addResponseInterceptor(
errorMessageResponseInterceptor((msg: string, error) => { errorMessageResponseInterceptor((msg: string) => ElMessage.error(msg)),
// 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理,根据不同的 code 做不同的提示,而不是直接使用 message.error 提示 msg
// 当前mock接口返回的错误字段是 error 或者 message
const responseData = error?.response?.data ?? {};
const errorMessage = responseData?.error ?? responseData?.message ?? '';
// 如果没有错误信息,则会根据状态码进行提示
ElMessage.error(errorMessage || msg);
}),
); );
return client; return client;

View File

@@ -1,22 +1,16 @@
import { createApp, watchEffect } from 'vue'; import { createApp } from 'vue';
import { registerAccessDirective } from '@vben/access'; import { registerAccessDirective } from '@vben/access';
import { preferences } from '@vben/preferences';
import { initStores } from '@vben/stores'; import { initStores } from '@vben/stores';
import '@vben/styles'; import '@vben/styles';
import '@vben/styles/ele'; import '@vben/styles/ele';
import { useTitle } from '@vueuse/core'; import { setupI18n } from '#/locales';
import { $t, setupI18n } from '#/locales';
import { initComponentAdapter } from './adapter/component';
import App from './app.vue'; import App from './app.vue';
import { router } from './router'; import { router } from './router';
async function bootstrap(namespace: string) { async function bootstrap(namespace: string) {
// 初始化组件适配器
await initComponentAdapter();
const app = createApp(App); const app = createApp(App);
// 国际化 i18n 配置 // 国际化 i18n 配置
@@ -31,16 +25,6 @@ async function bootstrap(namespace: string) {
// 配置路由及路由守卫 // 配置路由及路由守卫
app.use(router); app.use(router);
// 动态更新标题
watchEffect(() => {
if (preferences.app.dynamicTitle) {
const routeTitle = router.currentRoute.value.meta?.title;
const pageTitle =
(routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
useTitle(pageTitle);
}
});
app.mount('#app'); app.mount('#app');
} }

View File

@@ -1,11 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { NotificationItem } from '@vben/layouts'; import type { NotificationItem } from '@vben/layouts';
import { computed, ref, watch } from 'vue'; import { computed, ref } from 'vue';
import { AuthenticationLoginExpiredModal } from '@vben/common-ui'; import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants'; import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
import { useWatermark } from '@vben/hooks';
import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons'; import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
import { import {
BasicLayout, BasicLayout,
@@ -55,7 +54,6 @@ const notifications = ref<NotificationItem[]>([
const userStore = useUserStore(); const userStore = useUserStore();
const authStore = useAuthStore(); const authStore = useAuthStore();
const accessStore = useAccessStore(); const accessStore = useAccessStore();
const { destroyWatermark, updateWatermark } = useWatermark();
const showDot = computed(() => const showDot = computed(() =>
notifications.value.some((item) => !item.isRead), notifications.value.some((item) => !item.isRead),
); );
@@ -68,7 +66,7 @@ const menus = computed(() => [
}); });
}, },
icon: BookOpenText, icon: BookOpenText,
text: $t('ui.widgets.document'), text: $t('widgets.document'),
}, },
{ {
handler: () => { handler: () => {
@@ -86,7 +84,7 @@ const menus = computed(() => [
}); });
}, },
icon: CircleHelp, icon: CircleHelp,
text: $t('ui.widgets.qa'), text: $t('widgets.qa'),
}, },
]); ]);
@@ -105,21 +103,6 @@ function handleNoticeClear() {
function handleMakeAll() { function handleMakeAll() {
notifications.value.forEach((item) => (item.isRead = true)); notifications.value.forEach((item) => (item.isRead = true));
} }
watch(
() => preferences.app.watermark,
async (enable) => {
if (enable) {
await updateWatermark({
content: `${userStore.userInfo?.username}`,
});
} else {
destroyWatermark();
}
},
{
immediate: true,
},
);
</script> </script>
<template> <template>

View File

@@ -4,11 +4,7 @@ import type { Language } from 'element-plus/es/locale';
import type { App } from 'vue'; import type { App } from 'vue';
import { ref } from 'vue'; import { ref } from 'vue';
import { import { $t, setupI18n as coreSetup, loadLocalesMap } from '@vben/locales';
$t,
setupI18n as coreSetup,
loadLocalesMapFromDir,
} from '@vben/locales';
import { preferences } from '@vben/preferences'; import { preferences } from '@vben/preferences';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
@@ -17,12 +13,10 @@ import defaultLocale from 'element-plus/es/locale/lang/zh-cn';
const elementLocale = ref<Language>(defaultLocale); const elementLocale = ref<Language>(defaultLocale);
const modules = import.meta.glob('./langs/**/*.json'); const modules = import.meta.glob('./langs/*.json');
const localesMap = loadLocalesMap(modules);
const localesMap = loadLocalesMapFromDir(
/\.\/langs\/([^/]+)\/(.*)\.json$/,
modules,
);
/** /**
* 加载应用特有的语言包 * 加载应用特有的语言包
* 这里也可以改造为从服务端获取翻译数据 * 这里也可以改造为从服务端获取翻译数据
@@ -51,14 +45,14 @@ async function loadThirdPartyMessage(lang: SupportedLanguagesType) {
async function loadDayjsLocale(lang: SupportedLanguagesType) { async function loadDayjsLocale(lang: SupportedLanguagesType) {
let locale; let locale;
switch (lang) { switch (lang) {
case 'en-US': {
locale = await import('dayjs/locale/en');
break;
}
case 'zh-CN': { case 'zh-CN': {
locale = await import('dayjs/locale/zh-cn'); locale = await import('dayjs/locale/zh-cn');
break; break;
} }
case 'en-US': {
locale = await import('dayjs/locale/en');
break;
}
// 默认使用英语 // 默认使用英语
default: { default: {
locale = await import('dayjs/locale/en'); locale = await import('dayjs/locale/en');
@@ -77,14 +71,14 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
*/ */
async function loadElementLocale(lang: SupportedLanguagesType) { async function loadElementLocale(lang: SupportedLanguagesType) {
switch (lang) { switch (lang) {
case 'en-US': {
elementLocale.value = enLocale;
break;
}
case 'zh-CN': { case 'zh-CN': {
elementLocale.value = defaultLocale; elementLocale.value = defaultLocale;
break; break;
} }
case 'en-US': {
elementLocale.value = enLocale;
break;
}
} }
} }

View File

@@ -0,0 +1,8 @@
{
"page": {
"demos": {
"title": "Demos",
"element-plus": "Element Plus"
}
}
}

View File

@@ -1,12 +0,0 @@
{
"title": "Demos",
"elementPlus": "Element Plus",
"vben": {
"title": "Project",
"about": "About",
"document": "Document",
"antdv": "Ant Design Vue Version",
"naive-ui": "Naive UI Version",
"element-plus": "Element Plus Version"
}
}

View File

@@ -1,14 +0,0 @@
{
"auth": {
"login": "Login",
"register": "Register",
"codeLogin": "Code Login",
"qrcodeLogin": "Qr Code Login",
"forgetPassword": "Forget Password"
},
"dashboard": {
"title": "Dashboard",
"analytics": "Analytics",
"workspace": "Workspace"
}
}

View File

@@ -0,0 +1,8 @@
{
"page": {
"demos": {
"title": "演示",
"element-plus": "Element Plus"
}
}
}

View File

@@ -1,12 +0,0 @@
{
"title": "演示",
"elementPlus": "Element Plus",
"vben": {
"title": "项目",
"about": "关于",
"document": "文档",
"antdv": "Ant Design Vue 版本",
"naive-ui": "Naive UI 版本",
"element-plus": "Element Plus 版本"
}
}

View File

@@ -1,14 +0,0 @@
{
"auth": {
"login": "登录",
"register": "注册",
"codeLogin": "验证码登录",
"qrcodeLogin": "二维码登录",
"forgetPassword": "忘记密码"
},
"dashboard": {
"title": "概览",
"analytics": "分析页",
"workspace": "工作台"
}
}

View File

@@ -3,7 +3,6 @@ import { defineOverridesPreferences } from '@vben/preferences';
/** /**
* @description 项目配置文件 * @description 项目配置文件
* 只需要覆盖项目中的一部分配置,不需要的配置不用覆盖,会自动使用默认配置 * 只需要覆盖项目中的一部分配置,不需要的配置不用覆盖,会自动使用默认配置
* !!! 更改配置后请清空缓存,否则可能不生效
*/ */
export const overridesPreferences = defineOverridesPreferences({ export const overridesPreferences = defineOverridesPreferences({
// overrides // overrides

View File

@@ -5,7 +5,10 @@ import { preferences } from '@vben/preferences';
import { useAccessStore, useUserStore } from '@vben/stores'; import { useAccessStore, useUserStore } from '@vben/stores';
import { startProgress, stopProgress } from '@vben/utils'; import { startProgress, stopProgress } from '@vben/utils';
import { accessRoutes, coreRouteNames } from '#/router/routes'; import { useTitle } from '@vueuse/core';
import { $t } from '#/locales';
import { coreRouteNames, dynamicRoutes } from '#/router/routes';
import { useAuthStore } from '#/store'; import { useAuthStore } from '#/store';
import { generateAccess } from './access'; import { generateAccess } from './access';
@@ -31,12 +34,21 @@ function setupCommonGuard(router: Router) {
router.afterEach((to) => { router.afterEach((to) => {
// 记录页面是否加载,如果已经加载,后续的页面切换动画等效果不在重复执行 // 记录页面是否加载,如果已经加载,后续的页面切换动画等效果不在重复执行
loadedPaths.add(to.path); if (preferences.tabbar.enable) {
loadedPaths.add(to.path);
}
// 关闭页面加载进度条 // 关闭页面加载进度条
if (preferences.transition.progress) { if (preferences.transition.progress) {
stopProgress(); stopProgress();
} }
// 动态修改标题
if (preferences.app.dynamicTitle) {
const { title } = to.meta;
// useTitle(`${$t(title)} - ${preferences.app.name}`);
useTitle(`${$t(title)} - ${preferences.app.name}`);
}
}); });
} }
@@ -95,7 +107,7 @@ function setupAccessGuard(router: Router) {
roles: userRoles, roles: userRoles,
router, router,
// 则会在菜单中显示但是访问会被重定向到403 // 则会在菜单中显示但是访问会被重定向到403
routes: accessRoutes, routes: dynamicRoutes,
}); });
// 保存菜单信息和路由信息 // 保存菜单信息和路由信息

View File

@@ -19,12 +19,7 @@ const router = createRouter({
: createWebHistory(import.meta.env.VITE_BASE), : createWebHistory(import.meta.env.VITE_BASE),
// 应该添加到路由的初始路由列表。 // 应该添加到路由的初始路由列表。
routes, routes,
scrollBehavior: (to, _from, savedPosition) => { scrollBehavior: () => ({ left: 0, top: 0 }),
if (savedPosition) {
return savedPosition;
}
return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
},
// 是否应该禁止尾部斜杠。 // 是否应该禁止尾部斜杠。
// strict: true, // strict: true,
}); });

View File

@@ -1,6 +1,6 @@
import type { RouteRecordRaw } from 'vue-router'; import type { RouteRecordRaw } from 'vue-router';
import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants'; import { DEFAULT_HOME_PATH } from '@vben/constants';
import { AuthPageLayout } from '#/layouts'; import { AuthPageLayout } from '#/layouts';
import { $t } from '#/locales'; import { $t } from '#/locales';
@@ -32,19 +32,17 @@ const coreRoutes: RouteRecordRaw[] = [
{ {
component: AuthPageLayout, component: AuthPageLayout,
meta: { meta: {
hideInTab: true,
title: 'Authentication', title: 'Authentication',
}, },
name: 'Authentication', name: 'Authentication',
path: '/auth', path: '/auth',
redirect: LOGIN_PATH,
children: [ children: [
{ {
name: 'Login', name: 'Login',
path: 'login', path: 'login',
component: Login, component: Login,
meta: { meta: {
title: $t('page.auth.login'), title: $t('page.core.login'),
}, },
}, },
{ {
@@ -52,7 +50,7 @@ const coreRoutes: RouteRecordRaw[] = [
path: 'code-login', path: 'code-login',
component: () => import('#/views/_core/authentication/code-login.vue'), component: () => import('#/views/_core/authentication/code-login.vue'),
meta: { meta: {
title: $t('page.auth.codeLogin'), title: $t('page.core.codeLogin'),
}, },
}, },
{ {
@@ -61,7 +59,7 @@ const coreRoutes: RouteRecordRaw[] = [
component: () => component: () =>
import('#/views/_core/authentication/qrcode-login.vue'), import('#/views/_core/authentication/qrcode-login.vue'),
meta: { meta: {
title: $t('page.auth.qrcodeLogin'), title: $t('page.core.qrcodeLogin'),
}, },
}, },
{ {
@@ -70,7 +68,7 @@ const coreRoutes: RouteRecordRaw[] = [
component: () => component: () =>
import('#/views/_core/authentication/forget-password.vue'), import('#/views/_core/authentication/forget-password.vue'),
meta: { meta: {
title: $t('page.auth.forgetPassword'), title: $t('page.core.forgetPassword'),
}, },
}, },
{ {
@@ -78,7 +76,7 @@ const coreRoutes: RouteRecordRaw[] = [
path: 'register', path: 'register',
component: () => import('#/views/_core/authentication/register.vue'), component: () => import('#/views/_core/authentication/register.vue'),
meta: { meta: {
title: $t('page.auth.register'), title: $t('page.core.register'),
}, },
}, },
], ],

View File

@@ -10,16 +10,12 @@ const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
// 有需要可以自行打开注释,并创建文件夹 // 有需要可以自行打开注释,并创建文件夹
// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true }); // const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
/** 动态路由 */ /** 动态路由 */
const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles); const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
/** 外部路由列表访问这些页面可以不需要Layout可能用于内嵌在别的系统(不会显示在菜单中) */ /** 外部路由列表访问这些页面可以不需要Layout可能用于内嵌在别的系统 */
// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles); // const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
/** 不需要权限的菜单列表(会显示在菜单中) */
// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
const staticRoutes: RouteRecordRaw[] = [];
const externalRoutes: RouteRecordRaw[] = []; const externalRoutes: RouteRecordRaw[] = [];
/** 路由列表,由基本路由+静态路由组成 */ /** 路由列表,由基本路由+静态路由组成 */
@@ -32,5 +28,4 @@ const routes: RouteRecordRaw[] = [
/** 基本路由列表,这些路由不需要进入权限拦截 */ /** 基本路由列表,这些路由不需要进入权限拦截 */
const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name); const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);
const accessRoutes = [...dynamicRoutes, ...staticRoutes]; export { coreRouteNames, dynamicRoutes, routes };
export { accessRoutes, coreRouteNames, routes };

View File

@@ -29,7 +29,6 @@ const routes: RouteRecordRaw[] = [
path: '/workspace', path: '/workspace',
component: () => import('#/views/dashboard/workspace/index.vue'), component: () => import('#/views/dashboard/workspace/index.vue'),
meta: { meta: {
icon: 'carbon:workspace',
title: $t('page.dashboard.workspace'), title: $t('page.dashboard.workspace'),
}, },
}, },

View File

@@ -10,14 +10,14 @@ const routes: RouteRecordRaw[] = [
icon: 'ic:baseline-view-in-ar', icon: 'ic:baseline-view-in-ar',
keepAlive: true, keepAlive: true,
order: 1000, order: 1000,
title: $t('demos.title'), title: $t('page.demos.title'),
}, },
name: 'Demos', name: 'Demos',
path: '/demos', path: '/demos',
children: [ children: [
{ {
meta: { meta: {
title: $t('demos.elementPlus'), title: $t('page.demos.element-plus'),
}, },
name: 'NaiveDemos', name: 'NaiveDemos',
path: '/demos/element', path: '/demos/element',

View File

@@ -7,7 +7,6 @@ import {
VBEN_LOGO_URL, VBEN_LOGO_URL,
VBEN_NAIVE_PREVIEW_URL, VBEN_NAIVE_PREVIEW_URL,
} from '@vben/constants'; } from '@vben/constants';
import { SvgAntdvLogoIcon } from '@vben/icons';
import { BasicLayout, IFrameView } from '#/layouts'; import { BasicLayout, IFrameView } from '#/layouts';
import { $t } from '#/locales'; import { $t } from '#/locales';
@@ -19,7 +18,7 @@ const routes: RouteRecordRaw[] = [
badgeType: 'dot', badgeType: 'dot',
icon: VBEN_LOGO_URL, icon: VBEN_LOGO_URL,
order: 9999, order: 9999,
title: $t('demos.vben.title'), title: $t('page.vben.title'),
}, },
name: 'VbenProject', name: 'VbenProject',
path: '/vben-admin', path: '/vben-admin',
@@ -30,7 +29,7 @@ const routes: RouteRecordRaw[] = [
component: () => import('#/views/_core/about/index.vue'), component: () => import('#/views/_core/about/index.vue'),
meta: { meta: {
icon: 'lucide:copyright', icon: 'lucide:copyright',
title: $t('demos.vben.about'), title: $t('page.vben.about'),
}, },
}, },
{ {
@@ -40,7 +39,7 @@ const routes: RouteRecordRaw[] = [
meta: { meta: {
icon: 'lucide:book-open-text', icon: 'lucide:book-open-text',
link: VBEN_DOC_URL, link: VBEN_DOC_URL,
title: $t('demos.vben.document'), title: $t('page.vben.document'),
}, },
}, },
{ {
@@ -59,9 +58,8 @@ const routes: RouteRecordRaw[] = [
component: IFrameView, component: IFrameView,
meta: { meta: {
badgeType: 'dot', badgeType: 'dot',
icon: 'logos:naiveui',
link: VBEN_NAIVE_PREVIEW_URL, link: VBEN_NAIVE_PREVIEW_URL,
title: $t('demos.vben.naive-ui'), title: $t('page.vben.naive-ui'),
}, },
}, },
{ {
@@ -70,9 +68,8 @@ const routes: RouteRecordRaw[] = [
component: IFrameView, component: IFrameView,
meta: { meta: {
badgeType: 'dot', badgeType: 'dot',
icon: SvgAntdvLogoIcon,
link: VBEN_ANT_PREVIEW_URL, link: VBEN_ANT_PREVIEW_URL,
title: $t('demos.vben.antdv'), title: $t('page.vben.antdv'),
}, },
}, },
], ],

View File

@@ -1,4 +1,5 @@
import type { Recordable, UserInfo } from '@vben/types'; import type { LoginAndRegisterParams } from '@vben/common-ui';
import type { UserInfo } from '@vben/types';
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@@ -25,7 +26,7 @@ export const useAuthStore = defineStore('auth', () => {
* @param params 登录表单数据 * @param params 登录表单数据
*/ */
async function authLogin( async function authLogin(
params: Recordable<any>, params: LoginAndRegisterParams,
onSuccess?: () => Promise<void> | void, onSuccess?: () => Promise<void> | void,
) { ) {
// 异步处理用户登录操作并获取 accessToken // 异步处理用户登录操作并获取 accessToken
@@ -76,15 +77,11 @@ export const useAuthStore = defineStore('auth', () => {
} }
async function logout(redirect: boolean = true) { async function logout(redirect: boolean = true) {
try { await logoutApi();
await logoutApi();
} catch {
// 不做任何处理
}
resetAllStores(); resetAllStores();
accessStore.setLoginExpired(false); accessStore.setLoginExpired(false);
// 回登页带上当前路由地址 // 回登页带上当前路由地址
await router.replace({ await router.replace({
path: LOGIN_PATH, path: LOGIN_PATH,
query: redirect query: redirect

View File

@@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui'; import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
import type { Recordable } from '@vben/types';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
@@ -50,7 +49,7 @@ const formSchema = computed((): VbenFormSchema[] => {
* Asynchronously handle the login process * Asynchronously handle the login process
* @param values 登录表单数据 * @param values 登录表单数据
*/ */
async function handleLogin(values: Recordable<any>) { async function handleLogin(values: LoginCodeParams) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log(values); console.log(values);
} }

View File

@@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui'; import type { VbenFormSchema } from '@vben/common-ui';
import type { Recordable } from '@vben/types';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
@@ -28,7 +27,7 @@ const formSchema = computed((): VbenFormSchema[] => {
]; ];
}); });
function handleSubmit(value: Recordable<any>) { function handleSubmit(value: string) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log('reset email:', value); console.log('reset email:', value);
} }

View File

@@ -2,9 +2,9 @@
import type { VbenFormSchema } from '@vben/common-ui'; import type { VbenFormSchema } from '@vben/common-ui';
import type { BasicOption } from '@vben/types'; import type { BasicOption } from '@vben/types';
import { computed, markRaw } from 'vue'; import { computed } from 'vue';
import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui'; import { AuthenticationLogin, z } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
import { useAuthStore } from '#/store'; import { useAuthStore } from '#/store';
@@ -15,15 +15,15 @@ const authStore = useAuthStore();
const MOCK_USER_OPTIONS: BasicOption[] = [ const MOCK_USER_OPTIONS: BasicOption[] = [
{ {
label: 'Super', label: '超级管理员',
value: 'vben', value: 'vben',
}, },
{ {
label: 'Admin', label: '管理员',
value: 'admin', value: 'admin',
}, },
{ {
label: 'User', label: '用户',
value: 'jack', value: 'jack',
}, },
]; ];
@@ -78,13 +78,6 @@ const formSchema = computed((): VbenFormSchema[] => {
label: $t('authentication.password'), label: $t('authentication.password'),
rules: z.string().min(1, { message: $t('authentication.passwordTip') }), rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
}, },
{
component: markRaw(SliderCaptcha),
fieldName: 'captcha',
rules: z.boolean().refine((value) => value, {
message: $t('authentication.verifyRequiredTip'),
}),
},
]; ];
}); });
</script> </script>

View File

@@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui'; import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
import type { Recordable } from '@vben/types';
import { computed, h, ref } from 'vue'; import { computed, h, ref } from 'vue';
@@ -46,7 +45,7 @@ const formSchema = computed((): VbenFormSchema[] => {
rules(values) { rules(values) {
const { password } = values; const { password } = values;
return z return z
.string({ required_error: $t('authentication.passwordTip') }) .string()
.min(1, { message: $t('authentication.passwordTip') }) .min(1, { message: $t('authentication.passwordTip') })
.refine((value) => value === password, { .refine((value) => value === password, {
message: $t('authentication.confirmPasswordTip'), message: $t('authentication.confirmPasswordTip'),
@@ -56,6 +55,7 @@ const formSchema = computed((): VbenFormSchema[] => {
}, },
fieldName: 'confirmPassword', fieldName: 'confirmPassword',
label: $t('authentication.confirmPassword'), label: $t('authentication.confirmPassword'),
rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
}, },
{ {
component: 'VbenCheckbox', component: 'VbenCheckbox',
@@ -67,10 +67,15 @@ const formSchema = computed((): VbenFormSchema[] => {
h( h(
'a', 'a',
{ {
class: 'vben-link ml-1 ', class:
'cursor-pointer text-primary ml-1 hover:text-primary-hover',
href: '', href: '',
}, },
`${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`, [
$t('authentication.privacyPolicy'),
'&',
$t('authentication.terms'),
],
), ),
]), ]),
}), }),
@@ -81,7 +86,7 @@ const formSchema = computed((): VbenFormSchema[] => {
]; ];
}); });
function handleSubmit(value: Recordable<any>) { function handleSubmit(value: LoginAndRegisterParams) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log('register submit:', value); console.log('register submit:', value);
} }

View File

@@ -7,7 +7,6 @@ import type {
} from '@vben/common-ui'; } from '@vben/common-ui';
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { import {
AnalysisChartCard, AnalysisChartCard,
@@ -19,15 +18,11 @@ import {
} from '@vben/common-ui'; } from '@vben/common-ui';
import { preferences } from '@vben/preferences'; import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores'; import { useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils';
import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue'; import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
const userStore = useUserStore(); const userStore = useUserStore();
// 这是一个示例数据,实际项目中需要根据实际情况进行调整
// url 也可以是内部路由,在 navTo 方法中识别处理,进行内部跳转
// 例如url: /dashboard/workspace
const projectItems: WorkbenchProjectItem[] = [ const projectItems: WorkbenchProjectItem[] = [
{ {
color: '', color: '',
@@ -36,7 +31,6 @@ const projectItems: WorkbenchProjectItem[] = [
group: '开源组', group: '开源组',
icon: 'carbon:logo-github', icon: 'carbon:logo-github',
title: 'Github', title: 'Github',
url: 'https://github.com',
}, },
{ {
color: '#3fb27f', color: '#3fb27f',
@@ -45,7 +39,6 @@ const projectItems: WorkbenchProjectItem[] = [
group: '算法组', group: '算法组',
icon: 'ion:logo-vue', icon: 'ion:logo-vue',
title: 'Vue', title: 'Vue',
url: 'https://vuejs.org',
}, },
{ {
color: '#e18525', color: '#e18525',
@@ -54,7 +47,6 @@ const projectItems: WorkbenchProjectItem[] = [
group: '上班摸鱼', group: '上班摸鱼',
icon: 'ion:logo-html5', icon: 'ion:logo-html5',
title: 'Html5', title: 'Html5',
url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
}, },
{ {
color: '#bf0c2c', color: '#bf0c2c',
@@ -63,7 +55,6 @@ const projectItems: WorkbenchProjectItem[] = [
group: 'UI', group: 'UI',
icon: 'ion:logo-angular', icon: 'ion:logo-angular',
title: 'Angular', title: 'Angular',
url: 'https://angular.io',
}, },
{ {
color: '#00d8ff', color: '#00d8ff',
@@ -72,7 +63,6 @@ const projectItems: WorkbenchProjectItem[] = [
group: '技术牛', group: '技术牛',
icon: 'bx:bxl-react', icon: 'bx:bxl-react',
title: 'React', title: 'React',
url: 'https://reactjs.org',
}, },
{ {
color: '#EBD94E', color: '#EBD94E',
@@ -81,47 +71,39 @@ const projectItems: WorkbenchProjectItem[] = [
group: '架构组', group: '架构组',
icon: 'ion:logo-javascript', icon: 'ion:logo-javascript',
title: 'Js', title: 'Js',
url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript',
}, },
]; ];
// 同样,这里的 url 也可以使用以 http 开头的外部链接
const quickNavItems: WorkbenchQuickNavItem[] = [ const quickNavItems: WorkbenchQuickNavItem[] = [
{ {
color: '#1fdaca', color: '#1fdaca',
icon: 'ion:home-outline', icon: 'ion:home-outline',
title: '首页', title: '首页',
url: '/',
}, },
{ {
color: '#bf0c2c', color: '#bf0c2c',
icon: 'ion:grid-outline', icon: 'ion:grid-outline',
title: '仪表盘', title: '仪表盘',
url: '/dashboard',
}, },
{ {
color: '#e18525', color: '#e18525',
icon: 'ion:layers-outline', icon: 'ion:layers-outline',
title: '组件', title: '组件',
url: '/demos/features/icons',
}, },
{ {
color: '#3fb27f', color: '#3fb27f',
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
title: '系统管理', title: '系统管理',
url: '/demos/features/login-expired', // 这里的 URL 是示例,实际项目中需要根据实际情况进行调整
}, },
{ {
color: '#4daf1bc9', color: '#4daf1bc9',
icon: 'ion:key-outline', icon: 'ion:key-outline',
title: '权限管理', title: '权限管理',
url: '/demos/access/page-control',
}, },
{ {
color: '#00d8ff', color: '#00d8ff',
icon: 'ion:bar-chart-outline', icon: 'ion:bar-chart-outline',
title: '图表', title: '图表',
url: '/analytics',
}, },
]; ];
@@ -213,24 +195,6 @@ const trendItems: WorkbenchTrendItem[] = [
title: 'Vben', title: 'Vben',
}, },
]; ];
const router = useRouter();
// 这是一个示例方法,实际项目中需要根据实际情况进行调整
// This is a sample method, adjust according to the actual project requirements
function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
if (nav.url?.startsWith('http')) {
openWindow(nav.url);
return;
}
if (nav.url?.startsWith('/')) {
router.push(nav.url).catch((error) => {
console.error('Navigation failed:', error);
});
} else {
console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
}
}
</script> </script>
<template> <template>
@@ -246,7 +210,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
<div class="mt-5 flex flex-col lg:flex-row"> <div class="mt-5 flex flex-col lg:flex-row">
<div class="mr-4 w-full lg:w-3/5"> <div class="mr-4 w-full lg:w-3/5">
<WorkbenchProject :items="projectItems" title="项目" @click="navTo" /> <WorkbenchProject :items="projectItems" title="项目" />
<WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" /> <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
</div> </div>
<div class="w-full lg:w-2/5"> <div class="w-full lg:w-2/5">
@@ -254,7 +218,6 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
:items="quickNavItems" :items="quickNavItems"
class="mt-5 lg:mt-0" class="mt-5 lg:mt-0"
title="快捷导航" title="快捷导航"
@click="navTo"
/> />
<WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" /> <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
<AnalysisChartCard class="mt-5" title="访问来源"> <AnalysisChartCard class="mt-5" title="访问来源">

View File

@@ -7,7 +7,6 @@ import {
ElMessage, ElMessage,
ElNotification, ElNotification,
ElSpace, ElSpace,
ElTable,
} from 'element-plus'; } from 'element-plus';
type NotificationType = 'error' | 'info' | 'success' | 'warning'; type NotificationType = 'error' | 'info' | 'success' | 'warning';
@@ -39,14 +38,6 @@ function notify(type: NotificationType) {
type, type,
}); });
} }
const tableData = [
{ prop1: '1', prop2: 'A' },
{ prop1: '2', prop2: 'B' },
{ prop1: '3', prop2: 'C' },
{ prop1: '4', prop2: 'D' },
{ prop1: '5', prop2: 'E' },
{ prop1: '6', prop2: 'F' },
];
</script> </script>
<template> <template>
@@ -57,7 +48,6 @@ const tableData = [
<ElCard class="mb-5"> <ElCard class="mb-5">
<template #header> 按钮 </template> <template #header> 按钮 </template>
<ElSpace> <ElSpace>
<ElButton text>Text</ElButton>
<ElButton>Default</ElButton> <ElButton>Default</ElButton>
<ElButton type="primary"> Primary </ElButton> <ElButton type="primary"> Primary </ElButton>
<ElButton type="info"> Info </ElButton> <ElButton type="info"> Info </ElButton>
@@ -84,11 +74,5 @@ const tableData = [
<ElButton type="success" @click="notify('success')"> 成功 </ElButton> <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
</ElSpace> </ElSpace>
</ElCard> </ElCard>
<ElCard class="mb-5">
<ElTable :data="tableData" stripe>
<ElTable.TableColumn label="测试列1" prop="prop1" />
<ElTable.TableColumn label="测试列2" prop="prop2" />
</ElTable>
</ElCard>
</Page> </Page>
</template> </template>

View File

@@ -1,6 +1,6 @@
{ {
"name": "@vben/web-naive", "name": "@vben/web-naive",
"version": "5.4.5", "version": "5.3.0-beta.1",
"homepage": "https://vben.pro", "homepage": "https://vben.pro",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": { "repository": {
@@ -40,10 +40,10 @@
"@vben/styles": "workspace:*", "@vben/styles": "workspace:*",
"@vben/types": "workspace:*", "@vben/types": "workspace:*",
"@vben/utils": "workspace:*", "@vben/utils": "workspace:*",
"@vueuse/core": "catalog:", "@vueuse/core": "^11.0.3",
"naive-ui": "catalog:", "naive-ui": "^2.39.0",
"pinia": "catalog:", "pinia": "2.2.2",
"vue": "catalog:", "vue": "^3.5.4",
"vue-router": "catalog:" "vue-router": "^4.4.3"
} }
} }

View File

@@ -1,103 +0,0 @@
/**
* 通用组件共同的使用的基础组件,原先放在 adapter/form 内部,限制了使用范围,这里提取出来,方便其他地方使用
* 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
*/
import type { BaseFormComponentType } from '@vben/common-ui';
import type { Component, SetupContext } from 'vue';
import { h } from 'vue';
import { globalShareState } from '@vben/common-ui';
import { $t } from '@vben/locales';
import {
NButton,
NCheckbox,
NCheckboxGroup,
NDatePicker,
NDivider,
NInput,
NInputNumber,
NRadioGroup,
NSelect,
NSpace,
NSwitch,
NTimePicker,
NTreeSelect,
NUpload,
} from 'naive-ui';
import { message } from '#/adapter/naive';
const withDefaultPlaceholder = <T extends Component>(
component: T,
type: 'input' | 'select',
) => {
return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
return h(component, { ...props, ...attrs, placeholder }, slots);
};
};
// 这里需要自行根据业务组件库进行适配,需要用到的组件都需要在这里类型说明
export type ComponentType =
| 'Checkbox'
| 'CheckboxGroup'
| 'DatePicker'
| 'Divider'
| 'Input'
| 'InputNumber'
| 'RadioGroup'
| 'Select'
| 'Space'
| 'Switch'
| 'TimePicker'
| 'TreeSelect'
| 'Upload'
| BaseFormComponentType;
async function initComponentAdapter() {
const components: Partial<Record<ComponentType, Component>> = {
// 如果你的组件体积比较大,可以使用异步加载
// Button: () =>
// import('xxx').then((res) => res.Button),
Checkbox: NCheckbox,
CheckboxGroup: NCheckboxGroup,
DatePicker: NDatePicker,
// 自定义默认按钮
DefaultButton: (props, { attrs, slots }) => {
return h(NButton, { ...props, attrs, type: 'default' }, slots);
},
// 自定义主要按钮
PrimaryButton: (props, { attrs, slots }) => {
return h(NButton, { ...props, attrs, type: 'primary' }, slots);
},
Divider: NDivider,
Input: withDefaultPlaceholder(NInput, 'input'),
InputNumber: withDefaultPlaceholder(NInputNumber, 'input'),
RadioGroup: NRadioGroup,
Select: withDefaultPlaceholder(NSelect, 'select'),
Space: NSpace,
Switch: NSwitch,
TimePicker: NTimePicker,
TreeSelect: withDefaultPlaceholder(NTreeSelect, 'select'),
Upload: NUpload,
};
// 将组件注册到全局共享状态中
globalShareState.setComponents(components);
// 定义全局共享状态中的消息提示
globalShareState.defineMessage({
// 复制成功消息提示
copyPreferencesSuccess: (title, content) => {
message.success(content || title, {
duration: 0,
});
},
});
}
export { initComponentAdapter };

View File

@@ -1,19 +1,78 @@
import type { import type {
BaseFormComponentType,
VbenFormSchema as FormSchema, VbenFormSchema as FormSchema,
VbenFormProps, VbenFormProps,
} from '@vben/common-ui'; } from '@vben/common-ui';
import type { ComponentType } from './component'; import { h } from 'vue';
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
setupVbenForm<ComponentType>({ import {
NButton,
NCheckbox,
NCheckboxGroup,
NDatePicker,
NDivider,
NInput,
NInputNumber,
NRadioGroup,
NSelect,
NSpace,
NSwitch,
NTimePicker,
NTreeSelect,
NUpload,
} from 'naive-ui';
// 业务表单组件适配
export type FormComponentType =
| 'Checkbox'
| 'CheckboxGroup'
| 'DatePicker'
| 'Divider'
| 'Input'
| 'InputNumber'
| 'RadioGroup'
| 'Select'
| 'Space'
| 'Switch'
| 'TimePicker'
| 'TreeSelect'
| 'Upload'
| BaseFormComponentType;
// 初始化表单组件并注册到form组件内部
setupVbenForm<FormComponentType>({
components: {
Checkbox: NCheckbox,
CheckboxGroup: NCheckboxGroup,
DatePicker: NDatePicker,
// 自定义默认的重置按钮
DefaultResetActionButton: (props, { attrs, slots }) => {
return h(NButton, { ...props, attrs, text: false, type: 'info' }, slots);
},
// 自定义默认的提交按钮
DefaultSubmitActionButton: (props, { attrs, slots }) => {
return h(
NButton,
{ ...props, attrs, text: false, type: 'primary' },
slots,
);
},
Divider: NDivider,
Input: NInput,
InputNumber: NInputNumber,
RadioGroup: NRadioGroup,
Select: NSelect,
Space: NSpace,
Switch: NSwitch,
TimePicker: NTimePicker,
TreeSelect: NTreeSelect,
Upload: NUpload,
},
config: { config: {
// naive-ui组件不接受onChang事件所以需要禁用
disabledOnChangeListener: true,
// naive-ui组件的空值为null,不能是undefined否则重置表单时不生效
emptyStateValue: null,
baseModelPropName: 'value', baseModelPropName: 'value',
modelPropNameMap: { modelPropNameMap: {
Checkbox: 'checked', Checkbox: 'checked',
@@ -23,23 +82,17 @@ setupVbenForm<ComponentType>({
}, },
defineRules: { defineRules: {
required: (value, _params, ctx) => { required: (value, _params, ctx) => {
if (value === undefined || value === null || value.length === 0) { if ((!value && value !== 0) || value.length === 0) {
return $t('ui.formRules.required', [ctx.label]); return $t('formRules.required', [ctx.label]);
}
return true;
},
selectRequired: (value, _params, ctx) => {
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
} }
return true; return true;
}, },
}, },
}); });
const useVbenForm = useForm<ComponentType>; const useVbenForm = useForm<FormComponentType>;
export { useVbenForm, z }; export { useVbenForm, z };
export type VbenFormSchema = FormSchema<ComponentType>; export type VbenFormSchema = FormSchema<FormComponentType>;
export type { VbenFormProps }; export type { VbenFormProps };

View File

@@ -0,0 +1 @@
export * from './form';

Some files were not shown because too many files have changed in this diff Show More