Skip to content

feat: add app with Tdesign #6836

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

feat: add app with Tdesign #6836

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2264eaa
feat: 新增集成tdesign组件的apps
jinmao88 Oct 21, 2025
33b7a60
chore: 一些调整和兼容性更新
jinmao88 Oct 22, 2025
04321b1
fix: replace ant-design-vue with tdesign components in web-tdesign ap…
Copilot Nov 6, 2025
b472fbb
Merge branch 'main' into tdesign
likui628 Nov 6, 2025
57620dc
chore: apply coderabbitai suggestions
likui628 Nov 6, 2025
bd8ff73
fix: fix build error
likui628 Nov 6, 2025
a38d081
chore: enable VITE_NITRO_MOCK
likui628 Nov 6, 2025
dc77721
chore: demo i18n
likui628 Nov 6, 2025
be84330
chore: update demo routes
likui628 Nov 6, 2025
3e8e869
chore: Merge branch 'main' into tdesign
likui628 Nov 6, 2025
1af1124
chore: add tdesign logo
likui628 Nov 6, 2025
99d663a
fix: fix typecheck
likui628 Nov 6, 2025
b7bfd69
fix: fix lint
likui628 Nov 6, 2025
83ea27a
fix: fix lint
likui628 Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/web-antd/src/locales/langs/en-US/demos.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"document": "Document",
"antdv": "Ant Design Vue Version",
"naive-ui": "Naive UI Version",
"element-plus": "Element Plus Version"
"element-plus": "Element Plus Version",
"tdesign": "TDesign Vue Version"
}
}
3 changes: 2 additions & 1 deletion apps/web-antd/src/locales/langs/zh-CN/demos.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"document": "文档",
"antdv": "Ant Design Vue 版本",
"naive-ui": "Naive UI 版本",
"element-plus": "Element Plus 版本"
"element-plus": "Element Plus 版本",
"tdesign": "TDesign Vue 版本"
}
}
13 changes: 13 additions & 0 deletions apps/web-antd/src/router/routes/modules/vben.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import {
VBEN_GITHUB_URL,
VBEN_LOGO_URL,
VBEN_NAIVE_PREVIEW_URL,
VBEN_TD_PREVIEW_URL,
} from '@vben/constants';
import { SvgTDesignIcon } from '@vben/icons';

import { IFrameView } from '#/layouts';
import { $t } from '#/locales';
Expand Down Expand Up @@ -53,6 +55,17 @@ const routes: RouteRecordRaw[] = [
title: $t('demos.vben.naive-ui'),
},
},
{
name: 'VbenTDesign',
path: '/vben-admin/tdesign',
component: IFrameView,
meta: {
badgeType: 'dot',
icon: SvgTDesignIcon,
link: VBEN_TD_PREVIEW_URL,
title: $t('demos.vben.tdesign'),
},
},
{
name: 'VbenElementPlus',
path: '/vben-admin/ele',
Expand Down
3 changes: 2 additions & 1 deletion apps/web-ele/src/locales/langs/en-US/demos.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"document": "Document",
"antdv": "Ant Design Vue Version",
"naive-ui": "Naive UI Version",
"element-plus": "Element Plus Version"
"element-plus": "Element Plus Version",
"tdesign": "TDesign Vue Version"
}
}
3 changes: 2 additions & 1 deletion apps/web-ele/src/locales/langs/zh-CN/demos.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"document": "文档",
"antdv": "Ant Design Vue 版本",
"naive-ui": "Naive UI 版本",
"element-plus": "Element Plus 版本"
"element-plus": "Element Plus 版本",
"tdesign": "TDesign Vue 版本"
}
}
14 changes: 13 additions & 1 deletion apps/web-ele/src/router/routes/modules/vben.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ import {
VBEN_GITHUB_URL,
VBEN_LOGO_URL,
VBEN_NAIVE_PREVIEW_URL,
VBEN_TD_PREVIEW_URL,
} from '@vben/constants';
import { SvgAntdvLogoIcon } from '@vben/icons';
import { SvgAntdvLogoIcon, SvgTDesignIcon } from '@vben/icons';

import { IFrameView } from '#/layouts';
import { $t } from '#/locales';
Expand Down Expand Up @@ -65,6 +66,17 @@ const routes: RouteRecordRaw[] = [
title: $t('demos.vben.antdv'),
},
},
{
name: 'VbenTDesign',
path: '/vben-admin/tdesign',
component: IFrameView,
meta: {
badgeType: 'dot',
icon: SvgTDesignIcon,
link: VBEN_TD_PREVIEW_URL,
title: $t('demos.vben.tdesign'),
},
},
],
},
{
Expand Down
3 changes: 2 additions & 1 deletion apps/web-naive/src/locales/langs/en-US/demos.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"document": "Document",
"antdv": "Ant Design Vue Version",
"naive-ui": "Naive UI Version",
"element-plus": "Element Plus Version"
"element-plus": "Element Plus Version",
"tdesign": "TDesign Vue Version"
}
}
3 changes: 2 additions & 1 deletion apps/web-naive/src/locales/langs/zh-CN/demos.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"document": "文档",
"antdv": "Ant Design Vue 版本",
"naive-ui": "Naive UI 版本",
"element-plus": "Element Plus 版本"
"element-plus": "Element Plus 版本",
"tdesign": "TDesign Vue 版本"
}
}
14 changes: 13 additions & 1 deletion apps/web-naive/src/router/routes/modules/vben.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ import {
VBEN_ELE_PREVIEW_URL,
VBEN_GITHUB_URL,
VBEN_LOGO_URL,
VBEN_TD_PREVIEW_URL,
} from '@vben/constants';
import { SvgAntdvLogoIcon } from '@vben/icons';
import { SvgAntdvLogoIcon, SvgTDesignIcon } from '@vben/icons';

import { IFrameView } from '#/layouts';
import { $t } from '#/locales';
Expand Down Expand Up @@ -54,6 +55,17 @@ const routes: RouteRecordRaw[] = [
title: $t('demos.vben.antdv'),
},
},
{
name: 'VbenTDesign',
path: '/vben-admin/tdesign',
component: IFrameView,
meta: {
badgeType: 'dot',
icon: SvgTDesignIcon,
link: VBEN_TD_PREVIEW_URL,
title: $t('demos.vben.tdesign'),
},
},
{
name: 'VbenElementPlus',
path: '/vben-admin/ele',
Expand Down
8 changes: 8 additions & 0 deletions apps/web-tdesign/.env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# 应用标题
VITE_APP_TITLE=Vben Admin Tdesign

# 应用命名空间，用于缓存、store等功能的前缀，确保隔离
VITE_APP_NAMESPACE=vben-web-tdesign

# 对store进行加密的密钥，在将store持久化到localStorage时会使用该密钥进行加密
VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Critical security issue: Replace the placeholder encryption key before deployment.

The placeholder value please-replace-me-with-your-own-key remains unresolved. Per prior analysis, this key is actively used for AES encryption of localStorage data. Deploying with this placeholder would compromise the security of encrypted store data.

Before any production deployment, generate and inject a strong, randomly generated encryption key via GitHub Actions secrets or .env.local override to replace this placeholder.

I'll verify the security concern in the review comment by examining the codebase.

🏁 Script executed:

#!/bin/bash
# Step 1: Verify the file exists and contains the placeholder
echo "=== Checking for .env file ==="
fd -a "\.env$" apps/web-tdesign/

echo ""
echo "=== Content of .env file ==="
cat apps/web-tdesign/.env 2>/dev/null || echo "File not found"

echo ""
echo "=== Searching for VITE_APP_STORE_SECURE_KEY usage ==="
rg -n "VITE_APP_STORE_SECURE_KEY" --type-list | head -20

echo ""
echo "=== Searching in source code (not node_modules) ==="
rg -n "VITE_APP_STORE_SECURE_KEY" -g '!node_modules' -g '!dist' -g '!build' --type=ts --type=js --type=tsx --type=jsx -C 3

Length of output: 809

I need to correct my search syntax and locate where this key is actually used.

🏁 Script executed:

#!/bin/bash
# Fixed search for VITE_APP_STORE_SECURE_KEY usage
echo "=== Searching for VITE_APP_STORE_SECURE_KEY in source code ==="
rg -n "VITE_APP_STORE_SECURE_KEY" -g '!node_modules' -g '!dist' -g '!build' -C 4

echo ""
echo "=== Searching for encryption/crypto-related imports ==="
rg -n "encrypt|crypto|aes" -i -g '!node_modules' -g '!dist' -g '!build' -C 2 | head -80

echo ""
echo "=== Looking for store-related files ==="
fd -t f "store" apps/web-tdesign/src --extension ts --extension js | head -20

echo ""
echo "=== Checking for .env.local or similar override files ==="
fd -a "\.env" apps/web-tdesign/ -type f

Length of output: 5136

🏁 Script executed:

#!/bin/bash
# Fixed search for VITE_APP_STORE_SECURE_KEY usage
echo "=== Searching for VITE_APP_STORE_SECURE_KEY in source code ==="
rg -n "VITE_APP_STORE_SECURE_KEY" -g '!node_modules' -g '!dist' -g '!build' -C 4

echo ""
echo "=== Searching for encryption/crypto-related imports ==="
rg -n "encrypt|crypto|aes" -i -g '!node_modules' -g '!dist' -g '!build' -C 2 | head -80

echo ""
echo "=== Looking for store configuration files ==="
fd -t f store apps/web-tdesign/src --extension ts --extension js 2>/dev/null | head -20

echo ""
echo "=== Checking for .env variants ==="
fd -a "\.env" apps/web-tdesign/ -type f

Length of output: 5119

I need to check for deployment safeguards and build-time configurations.

🏁 Script executed:

#!/bin/bash
# Search for vite config and build-time security checks
echo "=== Looking for vite config files ==="
fd -t f "vite\.config" apps/web-tdesign/

echo ""
echo "=== Searching for .env validation or security checks ==="
rg -n "VITE_APP_STORE_SECURE_KEY|please-replace-me" -g '!node_modules' -g '!pnpm-lock.yaml'

echo ""
echo "=== Checking for build scripts that validate env vars ==="
rg -n "VITE_APP_STORE_SECURE_KEY" -g '!node_modules' packages/stores/

echo ""
echo "=== Checking .github workflows for secret injection ==="
fd -t f "workflow" -o "yml" -o "yaml" ".github/" 2>/dev/null

echo ""
echo "=== Looking at package.json for build commands ==="
rg -n "\"build\"|\"dev\"" apps/web-tdesign/package.json -C 2 2>/dev/null | head -30

Length of output: 776

I need to verify if this is a template project or actual production deployment, and check for environment-specific configurations.

🏁 Script executed:

#!/bin/bash
# Find all .env files and variants
echo "=== All .env files in entire repo ==="
find . -maxdepth 3 -name ".env*" -type f 2>/dev/null | grep -v node_modules

echo ""
echo "=== Check vite.config.mts content ==="
cat apps/web-tdesign/vite.config.mts | head -50

echo ""
echo "=== Search for .env.local in gitignore ==="
rg "\.env\.local" -g '.gitignore' .

echo ""
echo "=== Check README for setup instructions ==="
fd -t f README apps/web-tdesign/ -exec cat {} \; 2>/dev/null | head -60

echo ""
echo "=== Look for deployment or production documentation ==="
fd -t f "deploy|production|setup" apps/web-tdesign/ -type f 2>/dev/null | head -10

Length of output: 1273

Let me check the environment-specific configuration files to see if production has a proper value or also uses the placeholder.

🏁 Script executed:

#!/bin/bash
# Compare .env files for web-tdesign
echo "=== .env (base) ==="
cat apps/web-tdesign/.env | grep -i "VITE_APP_STORE_SECURE_KEY\|VITE_APP_TITLE\|VITE_APP_NAMESPACE"

echo ""
echo "=== .env.production ==="
cat apps/web-tdesign/.env.production | grep -i "VITE_APP_STORE_SECURE_KEY\|VITE_APP_TITLE\|VITE_APP_NAMESPACE" || echo "(no production override)"

echo ""
echo "=== .env.development ==="
cat apps/web-tdesign/.env.development | grep -i "VITE_APP_STORE_SECURE_KEY\|VITE_APP_TITLE\|VITE_APP_NAMESPACE" || echo "(no development override)"

echo ""
echo "=== Pattern check: Compare across other apps ==="
echo "web-antd .env.production:"
grep "VITE_APP_STORE_SECURE_KEY" apps/web-antd/.env.production 2>/dev/null || echo "not found"

echo ""
echo "web-ele .env.production:"
grep "VITE_APP_STORE_SECURE_KEY" apps/web-ele/.env.production 2>/dev/null || echo "not found"

echo ""
echo "web-naive .env.production:"
grep "VITE_APP_STORE_SECURE_KEY" apps/web-naive/.env.production 2>/dev/null || echo "not found"

echo ""
echo "=== Check all .env files for web-tdesign ==="
for env_file in apps/web-tdesign/.env*; do
  echo "File: $env_file"
  cat "$env_file"
  echo ""
done

Length of output: 1437

Address the placeholder encryption key before production deployment.

The review comment is verified as accurate. The placeholder VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key in apps/web-tdesign/.env will be used for AES encryption of localStorage data (configured in packages/stores/src/setup.ts:26) unless explicitly overridden. Since .env.production contains no override for this key and no build-time validation exists, production builds will be compiled with the placeholder unless you:

  1. Create .env.local with a strong encryption key (development only; not suitable for production builds)
  2. Set VITE_APP_STORE_SECURE_KEY as an environment variable before running pnpm vite build --mode production
  3. Manually update .env.production with a generated encryption key

Without one of these steps, encrypted store data in production remains vulnerable.

🤖 Prompt for AI Agents 
In apps/web-tdesign/.env around line 8, the VITE_APP_STORE_SECURE_KEY is a
placeholder ("please-replace-me-with-your-own-key") which will be baked into
builds if not overridden; replace it with a strong secret and do not commit it:
either (1) add a local-only .env.local with a securely generated key for
development, (2) set VITE_APP_STORE_SECURE_KEY as an environment variable before
running pnpm vite build --mode production, or (3) write a generated strong key
into .env.production for CI builds; ensure the key is high-entropy, kept out of
source control, and available to the build environment.

7 changes: 7 additions & 0 deletions apps/web-tdesign/.env.analyze
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# public path
VITE_BASE=/

# Basic interface address SPA
VITE_GLOB_API_URL=/api

VITE_VISUALIZER=true
16 changes: 16 additions & 0 deletions apps/web-tdesign/.env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# 端口号
VITE_PORT=5999

VITE_BASE=/

# 接口地址
VITE_GLOB_API_URL=/api

# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
VITE_NITRO_MOCK=true

# 是否打开 devtools，true 为打开，false 为关闭
VITE_DEVTOOLS=false

# 是否注入全局loading
VITE_INJECT_APP_LOADING=true
19 changes: 19 additions & 0 deletions apps/web-tdesign/.env.production
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
VITE_BASE=/

# 接口地址
VITE_GLOB_API_URL=https://mock-napi.vben.pro/api

# 是否开启压缩，可以设置为 none, brotli, gzip
VITE_COMPRESS=none

# 是否开启 PWA
VITE_PWA=false

# vue-router 的模式
VITE_ROUTER_HISTORY=hash

# 是否注入全局loading
VITE_INJECT_APP_LOADING=true

# 打包后是否生成dist.zip
VITE_ARCHIVER=true
35 changes: 35 additions & 0 deletions apps/web-tdesign/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="description" content="A Modern Back-end Management System" />
<meta name="keywords" content="Vben Admin Vue3 Vite" />
<meta name="author" content="Vben" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<!-- 由 vite 注入 VITE_APP_TITLE 变量，在 .env 文件内配置 -->
<title><%= VITE_APP_TITLE %></title>
<link rel="icon" href="/favicon.ico" />
<script>
// 生产环境下注入百度统计
if (window._VBEN_ADMIN_PRO_APP_CONF_) {
var _hmt = _hmt || [];
(function () {
var hm = document.createElement('script');
hm.src =
'https://hm.baidu.com/hm.js?b38e689f40558f20a9a686d7f6f33edf';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
}
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
54 changes: 54 additions & 0 deletions apps/web-tdesign/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
{
"name": "@vben/web-tdesign",
"version": "5.5.9",
"homepage": "https://vben.pro",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {
"type": "git",
"url": "git+https://github.com/vbenjs/vue-vben-admin.git",
"directory": "apps/web-tdesign"
},
"license": "MIT",
"author": {
"name": "vben",
"email": "[email protected]",
"url": "https://github.com/anncwb"
},
"type": "module",
"scripts": {
"build": "pnpm vite build --mode production",
"build:analyze": "pnpm vite build --mode analyze",
"dev": "pnpm vite --mode development",
"preview": "vite preview",
"typecheck": "vue-tsc --noEmit --skipLibCheck"
},
"imports": {
"#/*": "./src/*"
},
"dependencies": {
"@vben/access": "workspace:*",
"@vben/common-ui": "workspace:*",
"@vben/constants": "workspace:*",
"@vben/hooks": "workspace:*",
"@vben/icons": "workspace:*",
"@vben/layouts": "workspace:*",
"@vben/locales": "workspace:*",
"@vben/plugins": "workspace:*",
"@vben/preferences": "workspace:*",
"@vben/request": "workspace:*",
"@vben/stores": "workspace:*",
"@vben/styles": "workspace:*",
"@vben/types": "workspace:*",
"@vben/utils": "workspace:*",
"@vueuse/core": "catalog:",
"dayjs": "catalog:",
"lodash-es": "^4.17.21",
"pinia": "catalog:",
"tdesign-vue-next": "^1.17.1",
"vue": "catalog:",
"vue-router": "catalog:"
},
"devDependencies": {
"@types/lodash-es": "^4.17.12"
}
}
1 change: 1 addition & 0 deletions apps/web-tdesign/postcss.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from '@vben/tailwind-config/postcss';
Binary file added apps/web-tdesign/public/favicon.ico
View file
Open in desktop
Binary file not shown.
Loading
Loading