discuss-2025-01-02.md 27 KB

PWTK Admin Web 项目分析记录

2025-01-02

项目概述

属性
项目路径 /Users/yibu/dev_workspace/frontend/pwtk-admin-web
版本 1.2.51
技术栈 Vue 3 + TypeScript + Vite
UI框架 Element Plus 2.7 + Vant 4.9
状态管理 Pinia 2.0

项目架构

目录结构

src/
├── api/              # API 接口层 (22+ 模块)
├── assets/           # 静态资源
├── components/       # 公共组件 (95+ 组件)
├── composables/      # 组合式函数
├── const/            # 常量定义
├── directive/        # 自定义指令
├── hooks/            # 钩子函数
├── locales/          # 国际化
├── router/           # 路由配置
├── service/          # 服务层
├── stores/           # Pinia 状态管理
├── types/            # 类型定义
├── utils/            # 工具函数
└── views/            # 页面组件 (23+ 模块)

业务模块分析

核心模块 (23个)

模块 路径 功能描述
System /system 系统管理:账号、角色、资源、日志等
Site /site 网站管理:推广码、模板、站点、域名等
BBS /bbs 论坛管理:主版、帖子、评论、附件等
bbsList /bbsList 帖子列表:各类论坛帖子分类
PhotosSys /photosSys 图库系统:报纸、期刊、评论等
User /user 用户管理:用户、标签、等级、积分等
ChatroomSystem /chatroomSystem 聊天室系统
VoiceRoomManagement /voiceroomManagement 语音房管理
LiveRoomManagement /liveRoomManagement 直播系统
VideoManagement /videoManagement 视频管理
ExpertManagement /expertManagement 专家管理
Order /order 订单中心
Betting /betting 竞猜管理
TaskManagement /taskmanagement 任务管理
MessageNotice /messageNotice 消息公告
AdvertisementManagement - 广告管理
NewsSiteMgr /newsSiteMgr 新闻站点
WebVision /webVision* 站点组件/页面构建器
Login /login 登录页面
SSO /superAdmin/ssoLogin 单点登录
Home /home 首页仪表盘
Demo /demo 演示页面
404 /404 错误页面

API 接口层

接口模块 (22个)

api/
├── advertisement/  # 广告接口
├── betting/        # 竞猜接口
├── bss/            # 业务支撑系统
├── chat/           # 聊天接口
├── expert/         # 专家接口
├── global/         # 全局接口
├── live/           # 直播接口
├── login/          # 登录接口
├── manageSite/     # 站点管理
├── messageNotice/  # 消息公告
├── newsSiteMgr/    # 新闻站点
├── order/          # 订单接口
├── photoSys/       # 图库接口
├── site/           # 网站接口
├── super/          # 超管接口
├── system/         # 系统接口
├── task/           # 任务接口
├── user/           # 用户接口
├── video/          # 视频接口
├── webgw/          # Web 网关
├── index.ts        # 入口
└── type.ts         # 类型定义

公共组件 (109 组件)

组件分类统计

分类 数量 说明
核心表格/表单 12 m-prefix 组件
编辑器 8 TinyMCE/CKEditor/WangEditor
选择器 (select*) 22 业务选择器
自动完成 (autoChose*) 10 自动补全输入
自动完成 (*Autocomplete) 7 通用自动完成
文件上传 5 图片/文件上传
媒体播放 3 视频/音频/图片
通用UI 14 状态/时间/弹框
模态框 (modalCommon) 10 业务模态框
布局组件 (common) 6 页头/页脚/菜单
手机/地区 8 国家码/地区选择
其他 4 杂项组件

核心表格/表单组件 (12)

组件 功能
mTable 数据表格
mSynchronousTable 同步表格
checkboxTable 复选表格
mForm 通用表单
mSearchForm 搜索表单
mDialogForm 对话框表单
modalForm 模态表单
mComment 评论组件
mTabPane 标签页
mAutoSelect 自动选择
mAutocomplete 自动完成
mDatePick 日期选择
mEditor 编辑器封装
mUpload 上传封装

编辑器组件 (8)

类型 组件 功能
TinyMCE TinyEditor 富文本编辑器
TextTinyEditor 文本编辑器
CKEditor CKEditor CKEditor 4
CKEditor5 CKEditor 5
WangEditor WangEditor 王编辑器
Editor 通用编辑器
特殊 TextEditor 纯文本
TextEditorUploadHtml HTML上传

选择器组件 (22)

用户相关 | 组件 | 功能 | |------|------| | selectUserId | 用户ID选择 | | selectNickname | 昵称选择 | | selectUserIdAndNickname | 用户+昵称 | | selectExpertUserId | 专家用户 | | selectWhiteUser | 白名单用户 |

站点相关 | 组件 | 功能 | |------|------| | selectWebSiteId | 站点ID | | selectBindSiteId | 绑定站点 | | selectDomain | 域名选择 | | selectTemplateId | 模板选择 | | selectSystemTemplate | 系统模板 | | selectSketchCode | 草图选择 |

论坛相关 | 组件 | 功能 | |------|------| | selectForumID | 论坛ID | | selectForumIDByMainBoardID | 主版论坛 | | selectMainboardID | 主版ID |

彩种相关 | 组件 | 功能 | |------|------| | selectGameTypeList | 彩种列表 | | selectPlayTypeCodeList | 玩法列表 | | selectIssue | 期号选择 | | selectIssueByYear | 年度期号 |

其他 | 组件 | 功能 | |------|------| | selectVideoTagList | 视频标签 | | selectTagList | 标签列表 | | selectPhoneCode | 手机区号 | | selectIPList | IP列表 |


自动完成组件 (17)

autoChose* 系列 (10) | 组件 | 功能 | |------|------| | autoChoseUserId | 用户ID | | autoChoseNickname | 昵称 | | autoChoseLoginId | 登录ID | | autoChoseWebSiteId | 站点 | | autoChoseSiteId | 站点ID | | autoChoseTemplate | 模板 | | autoChoseSketchCode | 草图 | | autoChoseIssue | 期号 | | autoChosePromotionCode | 推广码 |

Autocomplete 系列 (7) | 组件 | 功能 | |------|------| | AutoComplete | 通用自动完成 | | userAutocomplete | 用户自动完成 | | userDeleteAutocomplete | 删除用户 | | userTwoAutocomplete | 双用户 | | templateAutocomplete | 模板自动完成 | | hAutocomplete | H自动完成 | | oneAutocomplete | 单选自动完成 | | dualAutocomplete | 双选自动完成 |


文件上传组件 (5)

组件 功能
FileImageUpload 图片上传
FileMultipleImageUpload 多图上传
uploadImage 图片上传
cropImg 图片裁剪
mUpload 通用上传

媒体组件 (3)

组件 功能
videoViewer 视频播放器
audioViewer 音频播放器
AsyncImage 异步图片加载

通用UI组件 (14)

状态/切换 | 组件 | 功能 | |------|------| | StatusToggle | 状态切换 | | expandIcon | 展开图标 | | countdown | 倒计时 |

链接/复制 | 组件 | 功能 | |------|------| | linkWithCopy | 链接复制 | | codePopover | 代码弹框 | | simplePopover | 简单弹框 | | tagsView | 标签视图 |

时间选择 | 组件 | 功能 | |------|------| | BasicTimePicker | 基础时间选择 | | timeSelect | 时间选择 | | timeSelect2 | 时间选择2 |

远程输入 | 组件 | 功能 | |------|------| | remoteInput | 远程输入 | | uniRemoteInput | 通用远程输入 | | sysTemplateRemoteInput | 系统模板远程输入 |

彩种 | 组件 | 功能 | |------|------| | gameTypeList | 彩种列表 | | gameTypeListMulti | 多彩种选择 | | gamePlayTypeCode | 玩法代码 |


模态框组件 (10)

modalCommon/

组件 功能
bbsSeriesModal BBS系列模态
forumSeriesModal 论坛系列模态
mainboardSeriesModal 主版系列模态
postSeriesModal 帖子系列模态
postScreenDetail 帖子详情模态
newsSeriesModal 新闻系列模态
photoSeriesModal 图片系列模态
domainSeriesModal 域名系列模态
siteDetailModal 站点详情模态

通用布局组件 (6)

common/

组件 功能
header 页头
footer 页脚
menu 菜单
copy 复制功能
formPro 表单Pro
SingleSelectArray 单选数组

手机/地区组件 (8)

手机号 | 组件 | 功能 | |------|------| | MobileCountry | 国家手机号 | | MobilePhoneWithCountryCodes | 带区号手机 | | selectPhoneCode | 区号选择 |

地区/语言 | 组件 | 功能 | |------|------| | AreaSelect | 地区选择 | | AreaSelectByWebsiteId | 站点地区选择 | | languageSelect | 语言选择 | | languageSelectByWebsiteId | 站点语言选择 | | switchLanguage | 切换语言 |


状态管理 (Pinia)

Store 功能
userinfo 用户信息
menulist 菜单列表
bettingStore 竞猜状态
modalStore 弹窗状态
searchStore 搜索状态
photoGroupState 图组状态
commentsState 评论状态
kvStore 键值存储
manageSiteStore 站点管理
siteManageStore 站点状态
tagview 标签页视图
changeI18n 国际化切换
indexDB IndexDB 存储

环境配置

开发环境

  • .env.development.49gallery - 49gallery 开发
  • .env.development.6gallery - 6gallery 开发

生产环境

  • .env.production - 通用生产
  • .env.production.49gallery - 49gallery 生产
  • .env.production.6gallery - 6gallery 生产

构建命令

pnpm dev              # 默认开发 (6gallery)
pnpm dev:49gallery    # 49gallery 开发
pnpm dev:6gallery     # 6gallery 开发
pnpm build            # 生产构建
pnpm test             # 单元测试
pnpm test:e2e         # E2E 测试

路由守卫

  • 认证检查: Cookie token 验证
  • SSO 支持: /superAdmin/ssoLogin 路由
  • 白名单: /login, /superAdmin/ssoLogin
  • 自动跳转: 未认证跳转登录页

关键依赖

核心

  • vue: ^3.5.13
  • vue-router: ^4.2.0
  • pinia: ^2.0.36
  • axios: ^1.4.0

UI

  • element-plus: 2.7.5
  • vant: ^4.9.9

工具

  • dayjs: ^1.11.13
  • echarts: ^5.4.2
  • lodash-es: ^4.17.21

开发

  • vite: 5.3.1
  • typescript: ~5.0.4
  • vitest: ^4.0.16
  • @playwright/test: ^1.57.0

相关资源

  • 项目路径: /Users/yibu/dev_workspace/frontend/pwtk-admin-web
  • Canvas 架构图: architecture-v1.canvas

Utils 工具函数 (45+)

数据处理

文件 功能
dataFormat.ts 数据格式化
dateFormat/ 日期格式化
numberFormat.ts 数字格式化
JSONFormate.ts JSON 处理
filterUtils.ts 过滤工具
validators.ts 验证器

认证相关

文件 功能
clearAuth.ts 清除认证
saveAuthTokens.ts 保存令牌
isLoggedIn.ts 登录状态
passwordEncrypt.ts 密码加密

业务工具

文件 功能
getCid.ts 获取客户ID
getImageUrl.ts 图片URL
getServiceUrl.ts 服务URL
getDownloadAppUrl.ts APP下载
timezone.ts 时区处理

Composables 组合式函数 (10)

函数 功能
useChunkUpload 分片上传
useVideoUpload 视频上传
useDeferredVideoUpload 延迟上传
useGenericVideoUpload 通用上传
useFileValidation 文件验证
useMultiSelectLogic 多选逻辑
useSubmitData 提交数据
useRoomName 房间名
useWhiteList 白名单
useAppInfo 应用信息

Hooks 钩子函数 (5)

钩子 功能
useGameTypes 彩种类型
useSearch 搜索功能
useSession 会话管理
useSystemStatus 系统状态
useTablehook 表格钩子

HTTP 服务层

Axios 封装特性

  • 请求/响应拦截器
  • Token 自动注入 (Cookie)
  • 错误统一处理 (401/403)
  • Loading 全局遮罩
  • 多 Content-Type 支持

多服务端点

变量 服务
apiPath 主 API
chatApiPath 聊天服务
taskApiPath 任务服务
videoApiPath 视频服务
liveApiPath 直播服务
audioConvertToolUrl 音频转换

Views 页面清单 (230+ 页面)

页面统计

模块 页面数 说明
System 15 系统管理
Site 28 网站管理
Bbs 55 论坛管理
PhotosSys 32 图库系统
User 58 用户管理
ChatroomSystem 18 聊天室
LiveRoomManagement 4 直播管理
VideoList 16 视频管理
ExpertManagement 22 专家管理
Order 6 订单中心
Betting 4 竞猜管理
TaskManagement 8 任务管理
MessageNotice 3 消息公告
AdvertisementManagement 3 广告管理
其他 6 Login/Home/Demo/404/SSO

System 系统管理 (15 页面)

文件 功能
index.vue 系统首页
account/index.vue 账号管理
account/addUserDialog.vue 添加用户弹窗
roles.vue 角色管理
dictionary.vue 字典管理
operationLog.vue 操作日志
task.vue 任务管理
taskPush/index.vue 任务推送
uploadLog/index.vue 上传日志
ipAddress/index.vue IP 地址管理
SMSManage/index.vue 短信管理
sensitiveWord/index.vue 敏感词
sensitiveWord/addSensitiveWordDialog.vue 添加敏感词
gameTypeManage/index.vue 彩种管理
gameTypeManage/addGameType/index.vue 添加彩种
gameTypeManage/editGameType/index.vue 编辑彩种

Site 网站管理 (28 页面)

目录 文件 功能
codeManagement/ index.vue 推广码管理
templateManagement/ index.vue 模板管理
addTemplateDailog.vue 添加模板
codeStaticDailog.vue 代码统计
templatePath.vue 模板路径
sketchRef.vue 草图引用
sketchManagement/ index.vue 草图管理
sketchInfo.vue 草图信息
sketchPath.vue 草图路径
siteManagement/ index.vue 站点管理
addWebsite.vue 添加站点
domainTab.vue 域名标签
unboundDomain.vue 未绑定域名
uploadLogo.vue 上传 Logo
Domain/ index.vue 域名管理
DomainInformationTabs.vue 域名信息
WebsiteBand.vue 网站绑定
TemplateBand.vue 模板绑定
SketchBand.vue 草图绑定
WebsiteTable.vue 网站表格
Domain/new/ addDomainDialog.vue 添加域名
NewWebsiteBand.vue 新网站绑定
NewTemplateBand.vue 新模板绑定
NewSketchBand.vue 新草图绑定
Navi/ navigationConfig.vue 导航配置
naviNestedTable.vue 嵌套导航表
componentBase/ index.vue 组件库
addPageComponentDialog.vue 添加组件

Bbs 论坛管理 (55 页面)

主要模块: | 目录 | 文件 | 功能 | |------|------|------| | bbsMainboard/ | index.vue | 论坛主版 | | bbsForum/ | index.vue | 论坛版块 | | bbsInfo/ | index.vue | 论坛信息 | | bbsCommentsList/ | index.vue | 评论列表 | | bbsAttachmentManagement/ | index.vue | 附件管理 |

帖子管理 (bbsPostContentManagement/):

  • index.vue - 帖子列表
  • editPostContentDialog/ - 编辑帖子
  • auditDialog/ - 审核弹窗
  • bbsPostConfig/ - 帖子配置
  • comments.vue - 评论组件
  • commentForm.vue - 评论表单
  • commentItem.vue - 评论项
  • phoneFrame.vue - 手机预览框
  • mediaPreview.vue - 媒体预览
  • iconToggle.vue - 图标切换
  • enhancedFileUpload.vue - 增强上传

新建帖子 (new/):

  • addBBSPostDialog.vue - 新建帖子弹窗
  • BBSPostForm.vue - 帖子表单
  • ChooseLastPost.vue - 选择上期
  • postEditor.vue - 帖子编辑器
  • attachmentManage.vue - 附件管理
  • gamePage.vue - 彩种页面
  • staticGamePage.vue - 静态彩种
  • lotteryBall.vue - 彩球组件

彩票组件 (lottery/):

  • lotteryGameContent.vue
  • lotteryGameTypeEditor.vue
  • lotteryRootGamePage.vue
  • lotteryStaticGamePage.vue
  • reviewLotteryBall.vue

评论组件 (components/):

  • commentItemBox.vue
  • commentItemForm.vue
  • post-comments.vue
  • starIconToggle.vue / upIconToggle.vue / downIconToggle.vue

解释组件 (explain-components/): 6 个 期号组件 (issue-components/): 6 个

图解 (photoExplain/):

  • index.vue - 图解列表
  • addExplain.vue - 添加图解
  • editExplain.vue - 编辑图解
  • commentExplain.vue - 图解评论
  • chooseIssue.vue - 选择期号
  • explainEditPage/index.vue - 图解编辑页

PhotosSys 图库系统 (32 页面)

目录 文件 功能
newspaper/ index.vue 报纸管理
relatedLayout.vue 相关布局
RecommendSortedList.vue 推荐排序
newsPaperIssue/ index.vue 期号管理
IssueDialog.vue 期号弹窗
IssueForm.vue 期号表单
IssueImageUploader.vue 期号图片
CommentTab.vue 评论标签
chooseExplain.vue 选择图解
clearGameTypeCacheDialog.vue 清除缓存
batchAddIssues/index.vue 批量添加
commentsList/ index.vue 评论列表
series/ index.vue 系列管理
websites/ index.vue 网站管理
bbsEncyclopedia/ index.vue 百科管理
guarantee/ index.vue 担保管理
advertisementList/ index.vue 广告列表
addAdvertisementDailog.vue 添加广告
gameResult/ index.vue 开奖结果
calendar.vue 日历视图
history.vue 历史记录
lottoBall.vue 彩球组件
svgLottoBall.vue SVG 彩球
issueVideo/ index.vue 期号视频
VideoFormDialog.vue 视频表单
GenericVideoUploader.vue 视频上传
issueMappingList/ index.vue 期号映射
editDialog.vue 编辑弹窗
batchMappingAdd/index.vue 批量映射
bachAddSet.vue 批量设置

User 用户管理 (58 页面)

用户列表 (userList/):

  • index.vue - 用户列表主页
  • userListComponent.vue - 列表组件
  • persionInfo.vue - 个人信息
  • accountInfo.vue - 账号信息
  • achievementShow.vue - 成就展示
  • phoneInput.vue - 手机输入
  • myFans.vue - 我的粉丝
  • myTeams.vue - 我的团队
  • followerList.vue - 关注列表
  • likeList.vue - 点赞列表
  • blockList.vue - 黑名单
  • userVisiter.vue - 访客
  • anonymousVisiter.vue - 匿名访客
  • userVote.vue - 用户投票

子功能组件:

  • BuyingLists/ - 购买列表
  • SaleLists/ - 销售列表
  • ChangePoint/ - 积分变更
  • SMSCodeSend/ - 短信发送
  • TagMaster/ - 标签管理
  • browseHistory/ - 浏览历史
  • cashOutListForUser/ - 提现列表
  • editPoints/ - 编辑积分
  • favoriteList/ - 收藏列表
  • myComment/ - 我的评论
  • points/ - 积分
  • stars/ - 星星
  • subComponet/ - 子组件 (3个)

其他模块: | 目录 | 文件 | 功能 | |------|------|------| | clientList/ | index.vue | 客户列表 | | | basicInformation.vue | 基本信息 | | | browsingHistory.vue | 浏览历史 | | | collectionAnonymously.vue | 匿名收藏 | | | followAnonymously.vue | 匿名关注 | | | likeAnonymously.vue | 匿名点赞 | | | voatAnonymously.vue | 匿名投票 | | customerTags/ | index.vue | 用户标签 | | | editCustomerTag/index.vue | 编辑标签 | | memberLevel/ | index.vue | 会员等级 | | | editLevelRule/index.vue | 编辑规则 | | activityCenter/ | index.vue | 活动中心 | | | activityCenterDialog/index.vue | 活动弹窗 | | pointsRules/ | index.vue | 积分规则 | | | PointConfigTab.vue | 积分配置 | | | StarConfigTab.vue | 星星配置 | | | TaskRewardConfigTab.vue | 任务奖励 | | pointDetail/ | index.vue | 积分明细 | | starDetail/ | index.vue | 星星明细 | | recommendList/ | index.vue | 推荐列表 | | | RecommandConfigDialog.vue | 推荐配置 | | | RecommandDetailDialog.vue | 推荐详情 | | leaderboard/ | index.vue | 排行榜 | | | fans/index.vue | 粉丝榜 | | | leaderPoints/index.vue | 积分榜 | | | overall/index.vue | 综合榜 | | | popularity/index.vue | 人气榜 | | | query/index.vue | 查询 | | | showLeaderBoard/index.vue | 展示榜单 | | | statusTagUser/index.vue | 状态标签 |


ChatroomSystem 聊天室系统 (18 页面)

目录 文件 功能
chatroomList/ index.vue 聊天室列表
createChatRoom.vue 创建聊天室
createLiveRoom.vue 创建直播间
createVoiceRoom.vue 创建语音房
createRoomDialog.vue 创建房间弹窗
rulesConfigDialog.vue 规则配置
whiteConfigDialog.vue 白名单配置
whiteListUserAutocomplete.vue 白名单自动完成
selectGameSerialNo/index.vue 选择彩期
selectIssueId/index.vue 选择期号
selectNewspaperCode/index.vue 选择报纸
batchRoomCreator/ index.vue 批量创建
addChatroomNameDialog.vue 添加房间名
addOwnerDialog.vue 添加房主
mPopover.vue 弹出框
chatroomMsgList/ index.vue 消息列表
chatroomMsgManagement/ index.vue 消息管理
chatroomUserManagement/ index.vue 用户管理

LiveRoomManagement 直播管理 (4 页面)

文件 功能
liveRoomList/index.vue 直播间列表
liveRoomMessageManagement/index.vue 消息管理
liveRoomMsgList/index.vue 消息列表
liveRoomUserManagement/index.vue 用户管理

VideoList 视频管理 (16 页面)

目录 文件 功能
/ index.vue 视频列表
VideoTagList/ index.vue 视频标签
createVideoTag.vue 创建标签
videoTagDialog.vue 标签弹窗
components/ createVideo.vue 创建视频
createVideoDialog.vue 创建弹窗
editVideo/index.vue 编辑视频
editVideoDialog.vue 编辑弹窗
auditVideo/index.vue 审核视频
VideoFileInput.vue 视频输入
DeferredVideoUploader.vue 延迟上传
FileInfo.vue 文件信息
UploadProgress.vue 上传进度

ExpertManagement 专家管理 (22 页面)

目录 文件 功能
expertList/ index.vue 专家列表
expertRulesConfig/index.vue 规则配置
saleList/ index.vue 销售列表
XSdialog/index.vue 销售弹窗
XSdialog/saleInfo.vue 销售信息
XSdialog/gameBox.vue 彩种选择
XSdialog/ChooseLastSale.vue 选择上期
buyingList/ index.vue 购买列表
competitionList/ index.vue 竞赛列表
pointsList/ index.vue 积分列表
configDialog.vue 配置弹窗
sixKingList/ index.vue 六王列表
Sixking.vue 六王组件
ExpertStatistics.vue 专家统计
HistoryChampion.vue 历史冠军
WinningStreakRank.vue 连胜榜
QueryForm.vue 查询表单
Switcher.vue 切换器
SixKingRankBoard/index.vue 排行榜
GameTypeCodeItem.vue 彩种项
components/ popover-list/index.vue 弹出列表

Order 订单中心 (6 页面)

目录 文件 功能
orderList/ index.vue 订单列表
cashOut/ index.vue 提现管理
cashOutConfig/index.vue 提现配置
auditCashOut/index.vue 审核提现
AuditCashOutReason.vue 审核原因

Betting 竞猜管理 (4 页面)

目录 文件 功能
bettingList/ index.vue 竞猜列表
bettingInfo.vue 竞猜信息
gameView.vue 彩种视图

TaskManagement 任务管理 (8 页面)

目录 文件 功能
TaskList/ index.vue 任务列表
liveTaskList/ index.vue 直播任务
createLiveTaskRoom/index.vue 创建直播任务
LiveVideoUploader.vue 直播视频上传
components/ createTaskRoomDialog.vue 创建任务弹窗
createVoiceTaskRoom.vue 创建语音任务
fileUploaderBtn.vue 文件上传按钮
basicDateRangeSelecter.vue 日期选择器

MessageNotice 消息公告 (3 页面)

文件 功能
index.vue 消息公告列表
maintenance.vue 维护公告
NoticeSortedList.vue 公告排序

AdvertisementManagement 广告管理 (3 页面)

文件 功能
index.vue 广告列表
addAdvertisementDialog.vue 添加广告
AdvertisementSortedList.vue 广告排序

其他页面 (6 页面)

文件 功能
Login/index.vue 登录页
SSO/index.vue 单点登录
Home/index.vue 首页
Home/echarts/ 图表组件 (bar/line)
Demo/index.vue 演示页
404.vue 错误页

自定义指令 (2)

指令 功能
v-copy 复制到剪贴板
v-permission 权限控制

Vite 构建配置

插件体系

插件 功能
@vitejs/plugin-vue Vue 3 支持
unplugin-auto-import 自动导入 Vue/Router API
unplugin-vue-components 组件自动注册
unplugin-icons 图标自动导入
vite-plugin-html HTML 模板注入
vite-plugin-vue-devtools 开发工具

代码分割策略

manualChunks: {
  'element-plus': [...],      // Element Plus 单独分块
  'wangeditor': [...],        // WangEditor 单独分块
  'vue-vendor': [...],        // Vue 生态 (vue/pinia/router)
  'vendor-lodash-utils': [...] // 工具库合并
}

图标集支持

  • ep (Element Plus)
  • mdi (Material Design)
  • ri (Remix Icons)
  • ic (Google Icons)
  • openmoji / twemoji (表情)

CI/CD 流水线

Jenkins Pipeline

  • Jenkinsfile.dev - 6gallery 开发环境
  • Jenkinsfile.49dev - 49gallery 开发环境

构建阶段

  1. 初始化 - 环境变量、日志配置
  2. 代码拉取 - Git checkout、commit 信息提取
  3. 更新子模块 - WebVision/componentsbiz
  4. 依赖安装 - pnpm install --frozen-lockfile
  5. 生成配置文件 - webConfigApi.js
  6. 项目构建 - pnpm run build
  7. Cloudflare 部署 - Cloudflare Pages

通知集成

服务 用途
Telegram Bot 构建状态推送
飞书 Webhook 团队通知
禅道 API Bug 状态同步

部署目标

  • 平台: Cloudflare Pages
  • 域名: tk-admin6.pwtk.cc

路由守卫

认证流程

beforeEach
   ↓
检查公开路由白名单
   ↓
验证 Cookie token
   ↓
调用 accountInfo API
   ↓
认证成功 → 放行
认证失败 → 跳转登录

SSO 单点登录

  • 入口: /superAdmin/ssoLogin
  • 参数: token (JWT), cid (客户ID)
  • 流程: 解析 URL → 调用 SSOLogin API → 设置 Cookie

白名单路由

  • /login - 登录页
  • /superAdmin/ssoLogin - SSO 登录

会话管理

  • lastVisitedPath 记录最后访问页
  • 登录后自动跳转
  • 失效自动清理本地数据

后续计划

短期

  • 完善组件文档
  • 提升测试覆盖率
  • 性能优化分析

中期

  • WebVision 组件扩展
  • 移动端适配优化
  • 国际化完善

长期

  • 微前端架构评估
  • 组件库独立发布