better-staridc-MNBT
1---
2title: tdesign 双端改造计划
3description: tdesign 主题用户端+管理端改造历史计划:目录结构、构建配置、PHP 入口、路由与布局(上篇)
4---
5
6# tdesign 主题改造计划:支持用户端 + 管理端
7
8> 历史计划文档,保留原结构。本文为上篇,覆盖计划 §1 目录结构至 §6 用户端视图组件;下篇(§7 用户端 API 模块至 §11 预期产出)见 [tdesign-user-scope-2.md](./tdesign-user-scope-2.md)。
9
10## 目标
11
12将 `tdesign-admin` 主题改造为 `tdesign`,同时支持用户端(user)和管理端(admin),两端均采用 Vue 3 + TDesign Vue Next SPA 架构,覆盖全部页面。
13
14---
15
16## 一、目录重命名与结构变更
17
18### 1.1 重命名主题目录
19```
20templates/tdesign-admin/ → templates/tdesign/
21```
22
23### 1.2 新增 user 目录
24```
25templates/tdesign/
26├── theme.json # scope 改为 ["user", "admin"]
27├── theme.php # 新增:注册 user/admin 菜单渲染器
28├── admin/ # 现有管理端(不变)
29│ ├── _spa_boot.php
30│ ├── dist/
31│ ├── index.php
32│ ├── login.php
33│ ├── set.php
34│ ├── list.php
35│ ├── add.php
36│ ├── node.php
37│ ├── pay_settings.php
38│ ├── plugin_manage.php
39│ ├── sy.php
40│ ├── tutorial.php
41│ └── update.php
42├── user/ # 新增:用户端
43│ ├── _spa_boot.php # 用户端 SPA 启动片段
44│ ├── dist/ # 用户端构建产物
45│ │ └── assets/
46│ ├── index.php # 框架壳入口
47│ ├── login.php # 登录入口
48│ ├── sy.php # 仪表盘入口
49│ ├── site_stats.php # 站点统计入口
50│ ├── set.php # 设置页入口(所有 gn 统一入口)
51│ ├── monitor.php # 监控任务入口
52│ ├── monitor_log.php # 监控日志入口
53│ ├── notice.php # 通知日志入口
54│ ├── webgl.php # 一键部署入口
55│ ├── sqlgl.php # SQL备份入口
56│ └── ftp.php # 文件管理入口(iframe 嵌入 amftp)
57└── spa/ # SPA 源码(双入口)
58 ├── admin.html # 管理端入口 HTML
59 ├── user.html # 用户端入口 HTML(新增)
60 ├── package.json
61 ├── vite.config.js # 改为多入口构建
62 └── src/
63 ├── main-admin.js # 管理端入口(原 main.js)
64 ├── main-user.js # 用户端入口(新增)
65 ├── App-admin.vue # 管理端根组件
66 ├── App-user.vue # 用户端根组件
67 ├── router/
68 │ ├── admin.js # 管理端路由(原 index.js)
69 │ └── user.js # 用户端路由(新增)
70 ├── layouts/
71 │ ├── AdminLayout.vue # 现有
72 │ └── UserLayout.vue # 新增:用户端布局
73 ├── api/ # 共享 http.js,各端独立 api 模块
74 │ ├── http.js # 共享
75 │ ├── auth.js # 管理端认证
76 │ ├── user-auth.js # 用户端认证
77 │ ├── user-site.js # 用户端站点设置 API
78 │ ├── user-stats.js # 站点统计 API
79 │ ├── user-monitor.js # 监控 API
80 │ ├── user-deploy.js # 部署 API
81 │ ├── user-database.js # 数据库 API
82 │ ├── user-file.js # 文件管理 API
83 │ └── ...现有 admin api 模块
84 ├── views/
85 │ ├── ...现有 admin 视图
86 │ └── user/ # 新增:用户端视图
87 │ ├── UserLoginView.vue
88 │ ├── UserDashboardView.vue
89 │ ├── UserSiteStatsView.vue
90 │ ├── UserSettingsView.vue # 统一设置页(按 gn 切换面板)
91 │ ├── UserMonitorView.vue
92 │ ├── UserMonitorLogView.vue
93 │ ├── UserNoticeView.vue
94 │ ├── UserDeployView.vue
95 │ ├── UserSqlBackupView.vue
96 │ └── UserFtpView.vue # iframe 嵌入 amftp
97 └── styles/
98 └── theme.scss # 共享样式
99```
100
101### 1.3 更新激活文件
102- 检查 `templates/active_admin_theme` 内容,若为 `tdesign-admin` 则改为 `tdesign`
103- 检查 `templates/active_user_theme`,若需启用则设为 `tdesign`
104- 检查数据库 `MN_config` 表的 `admintheme` 字段(若存在)
105
106---
107
108## 二、SPA 构建配置改造
109
110### 2.1 vite.config.js 改为多入口
111
112```js
113export default defineConfig({
114 plugins: [vue()],
115 base: './',
116 resolve: { alias: { '@': resolve(__dirname, 'src') } },
117 build: {
118 emptyOutDir: false, // 不清空,两次构建分别输出到 admin/dist 和 user/dist
119 rollupOptions: {
120 // 通过 --mode 或 input 参数区分
121 },
122 },
123})
124```
125
126### 2.2 构建脚本
127
128`package.json` 的 scripts:
129```json
130{
131 "scripts": {
132 "build:admin": "vite build --config vite.admin.config.js",
133 "build:user": "vite build --config vite.user.config.js",
134 "build": "npm run build:admin && npm run build:user",
135 "dev:admin": "vite --config vite.admin.config.js",
136 "dev:user": "vite --config vite.user.config.js"
137 }
138}
139```
140
141或采用单 vite.config.js + mode 切换,两个配置文件分别指定 input 和 outDir。
142
143### 2.3 构建产物
144- 管理端:`admin/dist/assets/index.js` + `admin/dist/assets/index.css`
145- 用户端:`user/dist/assets/index.js` + `user/dist/assets/index.css`
146
147---
148
149## 三、PHP 入口文件
150
151### 3.1 用户端 _spa_boot.php
152
153仿照 admin/_spa_boot.php,注入 `window.__TD_BOOT__`,但使用用户端变量:
154
155```php
156$boot = [
157 'siteName' => $conf['name'] ?? 'MNBT',
158 'footer' => $conf['hxp'] ?? '',
159 'loggedIn' => isset($islogins) && (int)$islogins === 1,
160 'needCaptcha' => isset($conf['yzm']) && $conf['yzm'] === 'true',
161 'ajaxBase' => './ajax.php',
162 'codeUrl' => './code.php',
163 'entry' => $td_entry ?? 'dashboard',
164 'user' => $user ?? '',
165 'zjid' => $zjid ?? 0,
166 'ssbt' => $ssbt ?? '',
167 'yhc' => $yhc ?? [],
168 'pluginMenuHtml' => _tdboot_render_plugin_menu_html(..., 'user'),
169 // ...
170];
171```
172
173### 3.2 用户端各 PHP 入口
174
175所有用户端控制器页面(sy.php, set.php, site_stats.php 等)的主题模板都改为:
176```php
177<?php
178$td_entry = 'dashboard'; // 或 'settings', 'stats' 等
179$td_hash = '#/settings/php'; // 根据 $_GET['gn'] 映射到 SPA 路由
180include __DIR__ . '/_spa_boot.php';
181```
182
183### 3.3 gn 到 SPA 路由的映射
184
185用户端 set.php 的 gn 参数映射:
186| gn | SPA 路由 |
187|----|----------|
188| php | #/settings/php |
189| url | #/settings/domain |
190| pass | #/settings/pass |
191| mrwd | #/settings/default-doc |
192| yxml | #/settings/run-dir |
193| wjt | #/settings/rewrite |
194| ssl | #/settings/ssl |
195| fdl | #/settings/hotlink |
196| gzip | #/settings/gzip |
197| cache | #/settings/cache |
198| xgpass | #/settings/password |
199| mysqlcz | #/settings/sql-auth |
200
201---
202
203## 四、用户端 SPA 路由
204
205```js
206// router/user.js
207const routes = [
208 { path: '/login', component: UserLoginView, meta: { guest: true } },
209 {
210 path: '/',
211 component: UserLayout,
212 meta: { auth: true },
213 children: [
214 { path: '', redirect: '/dashboard' },
215 { path: 'dashboard', component: UserDashboardView },
216 { path: 'stats', component: UserSiteStatsView },
217 { path: 'settings/:tab', component: UserSettingsView },
218 { path: 'monitor', component: UserMonitorView },
219 { path: 'monitor-log', component: UserMonitorLogView },
220 { path: 'notice', component: UserNoticeView },
221 { path: 'deploy', component: UserDeployView },
222 { path: 'sql-backup', component: UserSqlBackupView },
223 { path: 'ftp', component: UserFtpView },
224 ],
225 },
226]
227```
228
229---
230
231## 五、用户端布局 UserLayout.vue
232
233### 5.1 侧边栏菜单结构
234
235```
236概览
237 └─ 控制面板 (/dashboard)
238 └─ 站点统计 (/stats)
239
240基本配置
241 ├─ PHP版本切换 (/settings/php)
242 ├─ 域名修改 (/settings/domain)
243 ├─ 密码访问 (/settings/pass)
244 ├─ 默认文档 (/settings/default-doc)
245 ├─ 运行目录 (/settings/run-dir)
246 ├─ 伪静态 (/settings/rewrite)
247 ├─ SSL配置 (/settings/ssl)
248 ├─ 防盗链 (/settings/hotlink)
249 ├─ Gzip配置 (/settings/gzip)
250 ├─ 缓存配置 (/settings/cache)
251 └─ 修改密码 (/settings/password)
252
253数据管理
254 ├─ 在线文件管理 (/ftp)
255 ├─ SQL管理面板 (新窗口 /mysql.php)
256 ├─ SQL数据备份 (/sql-backup)
257 └─ SQL权限设置 (/settings/sql-auth)
258
259网站管理
260 ├─ 一键部署 (/deploy)
261 ├─ 监控任务 (/monitor)
262 └─ 通知日志 (/notice)
263
264插件菜单(动态注入)
265```
266
267### 5.2 顶部工具栏
268- 侧栏开关
269- 刷新按钮
270- 用户菜单(用户名、退出登录)
271
272---
273
274## 六、用户端视图组件
275
276### 6.1 UserLoginView.vue
277- 仿 LoginView.vue,使用用户端登录 API
278- 动态背景效果复用
279
280### 6.2 UserDashboardView.vue
281- 网页空间使用情况(进度条)
282- 数据库空间使用情况
283- 流量使用情况
284- 站点基本信息
285- 从 boot.yhc 获取数据
286
287### 6.3 UserSiteStatsView.vue
288- 访问统计图表(Chart.js 或 ECharts)
289- 流量统计
290- 请求数统计
291
292### 6.4 UserSettingsView.vue
293- 统一设置页,通过 `:tab` 参数切换面板
294- 每个面板对应一个 gn:
295 - PHP 版本切换
296 - 域名修改
297 - 密码访问设置
298 - 默认文档修改
299 - 运行目录设置
300 - 伪静态设置
301 - SSL 配置
302 - 防盗链
303 - Gzip 配置
304 - 缓存配置
305 - 修改密码
306 - SQL 权限设置
307
308### 6.5 UserMonitorView.vue
309- 监控任务列表
310- 添加/编辑/删除任务
311
312### 6.6 UserMonitorLogView.vue
313- 监控日志分页表格
314
315### 6.7 UserNoticeView.vue
316- 通知日志分页表格
317
318### 6.8 UserDeployView.vue
319- 一键部署程序列表
320- 部署操作
321
322### 6.9 UserSqlBackupView.vue
323- 备份列表
324- 创建备份/恢复/删除/下载
325
326### 6.10 UserFtpView.vue
327- **iframe 嵌入** amftp 文件管理器
328- 不用 SPA 重写(太复杂),直接 iframe 加载 `./ftp.php` 的原始 amftp 界面
329- 加载时显示 loading 占位