image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-12-23 04:06:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop'

Browse Source
This commit is contained in:
github-actions[bot] 2024-11-06 04:41:33 +00:00
commit 4180fb36de
50 changed files with 11498 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
.github/workflows/auto-release.yml vendored Normal file
View File

@ -0,0 +1,96 @@
name: Auto Release
on:
pull_request:
branches: [develop]
types: [opened, synchronize, reopened, closed]
paths:
- package.json
issue_comment:
types: [edited]
jobs:
generator:
runs-on: ubuntu-latest
if: >
github.event_name == 'pull_request' &&
github.event.pull_request.merged == false &&
startsWith(github.head_ref, 'release/')
steps:
- run: echo "The head of this PR starts with 'release/'"
- uses: actions/checkout@v4
- uses: TDesignOteam/tdesign-tag-action@main
id: tag-action
with:
token: ${{ secrets.GITHUB_TOKEN }}
- uses: TDesignOteam/tdesign-changelog-action@main
id: changelog
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
tag: ${{ steps.tag-action.outputs.version }}
- name: Add comment
uses: peter-evans/create-or-update-comment@v4
with:
issue-number: ${{ github.event.pull_request.number }}
body: |
${{ steps.changelog.outputs.changelog }}
comment_add_log:
runs-on: ubuntu-latest
if: >
github.event_name == 'issue_comment'
&& github.event.issue.pull_request
&& github.event.sender.login == github.event.issue.user.login
&& startsWith(github.event.comment.body, '## 🌈 ')
steps:
- id: comment
shell: bash
run: |
result=$(curl ${{github.event.issue.pull_request.url}} -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}")
headrefreg='"ref": "(release/[[:digit:]]{1,2}\.[[:digit:]]{1,2}\.[[:digit:]]{1,2})",'
if [[ $result =~ $headrefreg ]]
then
echo "属于 release pr 的 comment ${BASH_REMATCH[1]}"
else
echo "不属于 release pr 的 comment" && exit 1
fi
echo "::set-output name=branch::${BASH_REMATCH[1]}"
# zsh $match[1]
- uses: actions/checkout@v4
with:
ref: ${{ steps.comment.outputs.branch }}
- name: Commit and push if needed
env:
BODY: ${{ github.event.comment.body }}
run: |
txt=$(cat CHANGELOG.md)
echo "${txt%%##*}$BODY${txt##*---}" > CHANGELOG.md
git add .
git config --local user.email "github-actions[bot]@users.noreply.github.com"
git config --local user.name "github-actions[bot]"
git commit -m "chore: changelog's changes"
git push
echo "💾 pushed changelog's changes"
merge_tag:
runs-on: ubuntu-latest
if: >
github.event_name == 'pull_request' &&
github.event.pull_request.merged == true &&
startsWith(github.head_ref, 'release/')
steps:
- uses: actions/checkout@v4
with:
ref: develop
token: ${{ secrets.PERSONAL_TOKEN }}
- uses: TDesignOteam/tdesign-tag-action@main
id: tag-action
with:
token: ${{ secrets.GITHUB_TOKEN }}
- name: tag and push if needed
run: |
echo "${{ steps.tag-action.outputs.version }}"
git config --local user.email "github-actions[bot]@users.noreply.github.com"
git config --local user.name "github-actions[bot]"
git tag ${{ steps.tag-action.outputs.version }}
git push origin ${{ steps.tag-action.outputs.version }}
echo "pushed tag ${{ steps.tag-action.outputs.version }}"

24
.github/workflows/tag-push.yml vendored Normal file
View File

@ -0,0 +1,24 @@
# 文件名建议统一为 tag-push.yml
# 应用 publish.yml 的 demo
name: TAG_PUSH
on: create
jobs:
TAG_PUSH:
runs-on: ubuntu-latest
if: github.event.ref_type == 'tag'
steps:
- uses: actions/checkout@v4
with:
ref: main
fetch-depth: 0
token: ${{ secrets.PERSONAL_TOKEN }}
- run: |
git config --local user.email "github-actions[bot]@users.noreply.github.com"
git config --local user.name "github-actions[bot]"
git status
git fetch origin
git merge origin/develop
git push origin main

13
.gitignore vendored
View File

@ -1,6 +1,16 @@
node_modules # OS specific files
.DS_Store .DS_Store
# dependencies manager
node_modules/
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
# build files # build files
es/ es/
lib/ lib/
@ -24,5 +34,4 @@ yarn-error.log
# lock文件 请根据自身项目或团队需求选择具体的包管理工具 并移除具体的ignore的lock文件 # lock文件 请根据自身项目或团队需求选择具体的包管理工具 并移除具体的ignore的lock文件
yarn.lock yarn.lock
package-lock.json
pnpm-lock.yaml pnpm-lock.yaml

1
.yarnrc.yml Normal file
View File

@ -0,0 +1 @@
nodeLinker: node-modules

355
CHANGELOG.md Normal file
View File

@ -0,0 +1,355 @@
---
title: 更新日志
spline: explain
toc: false
docClass: timeline
---
## 🌈 0.11.0 `2024-11-06`
### 🚀 Features
- `feat`: 调整默认lock文件配置 @timi137137 ([#717](https://github.com/Tencent/tdesign-vue-next-starter/pull/717))
- `Router`: 路由跳转携带参数 @SuxueCode ([#720](https://github.com/Tencent/tdesign-vue-next-starter/pull/720))
- `feat`: 新增菜单自动折叠 @RSS1102 ([#744](https://github.com/Tencent/tdesign-vue-next-starter/pull/744))
### 🐞 Bug Fixes
- `breadcrumb`: 修复多层级路由指向错误 @lz6060788 ([#749](https://github.com/Tencent/tdesign-vue-next-starter/pull/749))
- `deps`: 修正因锁文件错误导致的编译失败 @timi137137 ([#777](https://github.com/Tencent/tdesign-vue-next-starter/pull/777))
### 🚧 Others
- `revert`: 回退Vue 3.3 @timi137137 ([#709](https://github.com/Tencent/tdesign-vue-next-starter/pull/709))
- build(deps-dev): bump @types/lodash from 4.14.202 to 4.17.6 @dependabot[bot] ([#732](https://github.com/Tencent/tdesign-vue-next-starter/pull/732))
- build(deps): bump tdesign-vue-next from 1.9.3 to 1.9.9 @dependabot[bot] ([#748](https://github.com/Tencent/tdesign-vue-next-starter/pull/748))
## 🌈 0.10.0 `2024-04-02`
### 🚀 Features
- 优化整体代码风格 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/638 https://github.com/Tencent/tdesign-vue-next-starter/pull/650 https://github.com/Tencent/tdesign-vue-next-starter/pull/680 https://github.com/Tencent/tdesign-vue-next-starter/pull/684)
- 新增侧边栏颜色切换 by @qingmang @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/681)
- 使用 `t-descriptions` 替换详情页代码 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/707)
### 🐞 Bug Fixes
- 修复国际化配置缺失 by @liweijie0812 @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/614 https://github.com/Tencent/tdesign-vue-next-starter/pull/632 https://github.com/Tencent/tdesign-vue-next-starter/pull/636)
- 修复 `ECharts` 图例缩放错误 by @lcosmos (https://github.com/Tencent/tdesign-vue-next-starter/pull/622)
- 修复 `ECharts` 图样文字重叠 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/682)
- 修复 `husky` 找不到npx命令 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/635)
- 修复路由切换时过渡动画异常 by @mokeyjay (https://github.com/Tencent/tdesign-vue-next-starter/pull/666)
- 修复mock环境下获取菜单异常 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/630)
## 🌈 0.9.0 `2023-10-04`
### 🚀 Features
- 新增内置国际化配置，支持中英切换 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/607)
- 新增 node 版本要求 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/605)
### 🐞 Bug Fixes
- 修复`t-link`在设置主题色时的样式异常 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/565)
- 移除无效的 `stylelint` 规则 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/584)
- 修复部分内置样式对 button 的影响 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/586)
- 修正部分模板页面卡片组件操作插槽用法 by @ngyyuusora (https://github.com/Tencent/tdesign-vue-next-starter/pull/587)
- 修改部分错别字 by @dufu1991 (https://github.com/Tencent/tdesign-vue-next-starter/pull/600)
- 优化”暂无通知“的样式问题 by @Summer-Shen (https://github.com/Tencent/tdesign-vue-next-starter/pull/604)
## 🌈 0.8.0 `2023-07-12`
### ❗️ BREAKING CHANGES
- 重构内置 axios 及请求相关逻辑，新增接口级防抖节流 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/556)
- 更新 stylelint 相关配置 移除 stylelint-less 依赖 by @timi137137 @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/553 https://github.com/Tencent/tdesign-vue-next-starter/pull/558)
### 🐞 Bug Fixes
- 修复路由跳转表头闪烁的问题 by @tanhh326 (https://github.com/Tencent/tdesign-vue-next-starter/pull/550)
- 修复筛选列表页，搜索合同状态显示object的异常 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/559)
## 🌈 0.7.7 `2023-06-27`
### 🚀 Features
- Vite版本升级至4 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/533)
- 组件库版本升级至 1.3.8 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/548)
- Axios支持格式化Params by @ngyyuusora (https://github.com/Tencent/tdesign-vue-next-starter/pull/544)
### 🐞 Bug Fixes
- 修复登出后路由重置问题 by @ngyyuusora (https://github.com/Tencent/tdesign-vue-next-starter/pull/545)
- 修复请求时204无内容判断异常 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/539)
## 🌈 0.7.6 `2023-05-30`
### 🚀 Features
- 移除了将所有文件一并提交的代码 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/515)
- 组件库版本升级至 1.3.4 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/518)
- 禁止隐式Any类型声明 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/519)
### 🐞 Bug Fixes
- 修复多标签页中保活异常问题 by @ngyyuusora (https://github.com/Tencent/tdesign-vue-next-starter/pull/523)
- 修复store存储token读取异常问题 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/526)
## 🌈 0.7.5 `2023-05-18`
### 🚀 Features
- 站点引入主题生成器插件，支持在页面模板站点尝试及预览不同主题的效果 by @uyarn @timi137137
- 优化路由守卫获取菜单异常的处理，跳转登录页并弹窗提示 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/502)
- 规范不同系统中的结束符 by @SpringHgui @yunxifd (https://github.com/Tencent/tdesign-vue-next-starter/pull/505)
### 🐞 Bug Fixes
- 修复无法将通知设为未读的缺陷 by @izoyo (https://github.com/Tencent/tdesign-vue-next-starter/pull/511)
- 修复 store 中并未对 localStorage 的 TOKEN_NAME 键进行赋值的缺陷 by @SpringHgui (https://github.com/Tencent/tdesign-vue-next-starter/pull/504)
## 🌈 0.7.4 `2023-04-13`
### 🚀 Features
- Eslint 新增 `simple-import-sort` 插件规范引入 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/464)
- 菜单路由支持`keepAlive`参数控制页面是否开启缓存 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/470)
- 标签页可配置禁止拖拽 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/454)
### 🐞 Bug Fixes
- 修复拼音输入的问题 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/421)
- 修复同级路由路径存着相同启始字符时菜单高亮异常的问题 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/450)
- 修复部分`devDependencies`错误配置在`dependencies`的问题 by @PDieE (https://github.com/Tencent/tdesign-vue-next-starter/pull/456)
- 修复请求出错重试后触发两次回调的问题 by @PDieE (https://github.com/Tencent/tdesign-vue-next-starter/pull/458)
- 修复多级菜单高亮问题 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/459)
## 🌈 0.7.3 `2023-03-15`
### 🚀 Features
- 优化菜单生成 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/413)
- 优化修改主题色的逻辑 by @hzgotb (https://github.com/Tencent/tdesign-vue-next-starter/pull/428)
- 接口配置硬编码调整到环境变量 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/445)
### 🐞 Bug Fixes
- 修复修改.html文件stylelint检查出错的问题 by @hmingv (https://github.com/Tencent/tdesign-vue-next-starter/pull/436)
- 删除废弃的globEager by @hmingv (https://github.com/Tencent/tdesign-vue-next-starter/pull/439)
## 🌈 0.7.2 `2023-02-21`
### 🚀 Features
- 优化菜单生成逻辑 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/413)
- 多标签Tab栏支持拖拽排序 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/426)
### 🐞 Bug Fixes
- 修复列表页示例拼音输入的问题 by @liweijie0812 (https://github.com/Tencent/tdesign-vue-next-starter/pull/421)
- 优化登录页及个人中心页样式 by @Wen1kang (https://github.com/Tencent/tdesign-vue-next-starter/pull/415)
- 修复 tdesign-vue-next 1.0.8版本由于引入Teleport后drawer内样式穿透失效引起的样式错乱 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/425)
## 🌈 0.7.1 `2023-02-08`
### 🐞 Bug Fixes
- 修复环境变量的问题 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/399)
- 修复 stylelint 14的配置问题 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/404)
- 修复dashboard&layout相关样式Bug by @Wen1kang (https://github.com/Tencent/tdesign-vue-next-starter/pull/403)
- 修复菜单图标样式问题 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/402)
## 🌈 0.7.0 `2023-01-16`
### ❗️ BREAKING CHANGES
- 移除所有内置主题色相关代码，全部通过 `tvision-color` 计算获取，调整颜色相关方法的目录结构 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/392)
- 新增后端路由权限相关代码，默认菜单路由权限改为后端控制，具体使用可参考文档 [权限控制](https://tdesign.tencent.com/starter/docs/vue-next/permission-control) by @timi137137 @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/394)
### 🚀 Features
- 支持任意颜色作为初始化主题颜色 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/392)
- 升级 `tvision-color` 至1.5.0 使用新的`getColorGradations`方法，修正部分选择的过曝主题色 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/392)
- 升级相关依赖 `vite`需升级至`3.0`以上，支持图标后端配置等场景需求 by @timi137137 @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/394)
### 🐞 Bug Fixes
- 修复自定义颜色切换明亮暗黑模式时无法沿用的缺陷 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/392)
`Tips: 此次发布 较 0.6.x 版本 删除了此前大量内置项目的色彩生成逻辑，权限控制相关逻辑也发生巨大变动 若打开预览无法访问请清除 localStorage 等缓存再尝试 跟进升级请慎重`
## 🌈 0.6.1 `2022-12-19`
### 🚀 Features
- 优化登录跳转支持回跳带query参数的页面 by @PDieE (https://github.com/Tencent/tdesign-vue-next-starter/pull/374)
- 引入类型声明为type 方便CLI工具做JS版本转换处理 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/375)
- 新增打开外部页面（内嵌及外链）配置及示例 by @dianjie (https://github.com/Tencent/tdesign-vue-next-starter/pull/377)
- 支持编辑器使用`volar`提示组件名称及对应API by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/378)
### 🐞 Bug Fixes
- 修复DateRangePicker组件内分页样式显示异常 by @wandoupeas (https://github.com/Tencent/tdesign-vue-next-starter/pull/373)
- 修复组件升级引入的布局高度问题 by @dianjie (https://github.com/Tencent/tdesign-vue-next-starter/pull/367)
## 🌈 0.6.0 `2022-11-25`
### ❗️ BREAKING CHANGES
- 废弃大量内置`less variables`, 尺寸、色彩、字体、圆角及阴影统一使用组件库内置变量 具体变量可参考 [Design Token](https://tdesign.tencent.com/starter/docs/vue-next/design-token) by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/365)
- 升级默认主题色的配色方案 组件库升级至0.24.9及请参照改动 @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/365)
### 🐞 Bug Fixes
- 修复组件库升级至0.24.8及以上由于头部高度变化导致部分导航模式样式异常的问题 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/365)
- 避免 Content-Type 被改为 `text/plain` by @TonyLuo (https://github.com/Tencent/tdesign-vue-next-starter/pull/361)
## 🌈 0.5.6 `2022-11-18`
### 🐞 Bug Fixes
- 修正退出后 userStore.userInfo 存在残留的问题 by @PDieE (https://github.com/Tencent/tdesign-vue-next-starter/pull/357)
- 修复0.5.5 头部高度在多标签页的样式异常 by @uyarn @dodu2014 (https://github.com/Tencent/tdesign-vue-next-starter/pull/360)
## 🌈 0.5.5 `2022-11-16`
### 🚀 Features
- 升级axios至1.0版本 by @dependabot (https://github.com/Tencent/tdesign-vue-next-starter/pull/351)
- 升级tdesign-vue-next至0.24版本 支持尺寸类Design Token 部分样式需调整 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/355)
### 🐞 Bug Fixes
- 修复导航布局`side`模式下小屏显示问题 by @dianjie (https://github.com/Tencent/tdesign-vue-next-starter/pull/348)
## 🌈 0.5.4 `2022-10-26`
### 🚀 Features
- 升级`vue-router`至4.1+ by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/341)
- 升级`vue-tsc`至 1.0+ by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/341)
### 🐞 Bug Fixes
- 修复系统设置事件绑定位置的错误(#344) by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/345)
## 🌈 0.5.3 `2022-10-18`
### 🚀 Features
- 项目通用 less vars 设置为全局变量，不需要再手动引入 by @dianjie (https://github.com/Tencent/tdesign-vue-next-starter/pull/327)
- 升级组件库依赖至0.24.2 优化下拉菜单高度及多级结构 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/339)
## 🌈 0.5.2 `2022-09-27`
### 🚀 Features
- 升级组件库依赖至0.23 修复切换页面等场景下表格吸附效果未重新计算导致的样式异常 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/322)
- 增加urlPrefix判断 避免undefined拼接到url导致请求无效 @kerwin612 (https://github.com/Tencent/tdesign-vue-next-starter/pull/311)
### 🐞 Bug Fixes
- 修复`Sidenav`参数错误导致跟随系统样式异常的问题 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/315)
- 修复user持久化导致的问题 by @PDieE (https://github.com/Tencent/tdesign-vue-next-starter/pull/316)
- 修复路径重复拼接的问题 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/319)
## 🌈 0.5.1 `2022-09-14`
### 🚀 Features
- 多标签页的右键操作扩展支持非当前页进行操作 by @zhangpaopao0609 @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/297)
- 使用插件将store数据持久化 by @PDieE (https://github.com/Tencent/tdesign-vue-next-starter/pull/291)
- add README in English by @paiakarit @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/301 https://github.com/Tencent/tdesign-vue-next-starter/pull/305)
### 🐞 Bug Fixes
- 解决当打开多个标签后 退出会报错的问题 by @PDieE (https://github.com/Tencent/tdesign-vue-next-starter/pull/293)
- 修复底部版权信息及面包屑导航垂直居中问题 by @zengqiu (https://github.com/Tencent/tdesign-vue-next-starter/pull/299 https://github.com/Tencent/tdesign-vue-next-starter/pull/298)
- 修复浏览器不兼容页中浏览器推荐卡片遮挡页脚信息问题 by @zengqiu (https://github.com/Tencent/tdesign-vue-next-starter/pull/303)
## 🌈 0.5.0 `2022-09-06`
### ❗️ BREAKING CHANGES
- jsx代码全部改完sfc(.vue) 统一全部页面及组件用sfc编写 by @zhangpaopao0609 (https://github.com/Tencent/tdesign-vue-next-starter/pull/279)
### 🐞 Bug Fixes
- 修复混合模式下选择分割菜单再点击顶部登录页出现空白页的异常 by @setli (https://github.com/Tencent/tdesign-vue-next-starter/pull/287)
- 修复顶部布局头部缺失的问题 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/292)
- 修复侧边栏折叠时版本号前显示 false 问题 by @zengqiu (https://github.com/Tencent/tdesign-vue-next-starter/pull/294)
## 🌈 0.4.1 `2022-08-30`
### 🚀 Features
- 升级tdesign-vue-next至0.20.2版本 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/276)
- tabs-router 支持存储路由的参数 by @dodu2014 (https://github.com/Tencent/tdesign-vue-next-starter/pull/269)
### 🐞 Bug Fixes
- 修复更新vue-router版本后的遗留问题 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/261)
- 修正请求时formData类型的数据会被过滤的问题 by @PDieE (https://github.com/Tencent/tdesign-vue-next-starter/pull/272)
- 修正store内数据提前被清理导致报错的问题 by @PDieE (https://github.com/Tencent/tdesign-vue-next-starter/pull/274)
## 🌈 0.4.0 `2022-08-08`
### ❗️ BREAKING CHANGES
- 升级vue-router版本 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/257)
### 🚀 Features
- 处理代码中不符合规范的文件和写法 升级相关依赖 增加更多的规范 by @uyarn (https://github.com/Tencent/tdesign-vue-next-starter/pull/243)
- 新增支持子菜单是否默认展开的配置 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/245)
- 升级组件库依赖至0.19.0 组件圆角样式有变化 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/252)
### 🐞 Bug Fixes
- 修复变更颜色/模式时出现页面卡死的异常 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/254)
- 修复侧边栏开合时图表没有刷新的问题 by @timi137137 (https://github.com/Tencent/tdesign-vue-next-starter/pull/253)
- 填补登录页面缺失的手机号输入框及相关逻辑 by @hxywuya (https://github.com/Tencent/tdesign-vue-next-starter/pull/255)
## 🌈 0.3.6 `2022-07-18`
### 🚀 Features
- 升级tdesign-vue-next至0.18.0版本
- 增加apis目录 管理项目中使用到的api by @timi137137 ([#221](https://github.com/Tencent/tdesign-vue-next-starter/pull/221))
- router调整为自动导入 by @timi137137 ([#223](https://github.com/Tencent/tdesign-vue-next-starter/pull/223))
### 🐞 Bug Fixes
- 部分选择器未随自定义样式前缀更改 by @wandoupeas ([#229](https://github.com/Tencent/tdesign-vue-next-starter/pull/229))
## 🌈 0.3.5 `2022-06-27`
### 🚀 Features
- 调整类型相关问题的项目结构 by @timi137137 ([#184](https://github.com/Tencent/tdesign-vue-next-starter/pull/184))
- 改造请求封装相关代码 by @timi137137 ([#185](https://github.com/Tencent/tdesign-vue-next-starter/pull/185))
### 🐞 Bug Fixes
- 修复首页TAB关闭其他时的异常 by @SadWood ([#180](https://github.com/Tencent/tdesign-vue-next-starter/pull/180))
- 修复升级0.16版本后自定义设置中选项样式的异常 by @uyarn ([#193](https://github.com/Tencent/tdesign-vue-next-starter/pull/193))
## 🌈 0.3.4 `2022-06-17`
### 🚀 Features
- 升级组件库依赖至0.16.0，`datepicker`、`dialog`组件的使用请参考改动 by @pengYYYYY ([#174](https://github.com/Tencent/tdesign-vue-next-starter/pull/174))
### 🐞 Bug Fixes
- 修复退出登录之后重新登陆新增了空Tab的缺陷 by @kerwin612 ([#168](https://github.com/Tencent/tdesign-vue-next-starter/pull/168))
- 修复切换多标签Tab页时的告警问题 by @kerwin612 ([#173](https://github.com/Tencent/tdesign-vue-next-starter/pull/173))
## 🌈 0.3.3 `2022-06-02`
### 🚀 Features
- 模板中使用颜色变量全部改造为CSS Token by @kerwin612 ([#157](https://github.com/Tencent/tdesign-vue-next-starter/pull/157))
### 🐞 Bug Fixes
- 升级组件库至0.15.4，修复菜单字重及顶部菜单箭头翻转方向、暗黑模式的颜色问题 by @uyarn @leejim ([#159](https://github.com/Tencent/tdesign-vue-next-starter/pull/159)) [tdesign-vue-next#916](https://github.com/Tencent/tdesign-vue-next/pull/916)
## 🌈 0.3.2 `2022-05-27`
### 🚀 Features
- 升级组件库依赖至0.15.1 by @pengYYYYY ([#154](https://github.com/Tencent/tdesign-vue-next-starter/pull/154))
- 增加多标签页增加支持指定路由不缓存的功能 by @uyarn ([#155](https://github.com/Tencent/tdesign-vue-next-starter/pull/155))
### 🐞 Bug Fixes
- 修复页面滚动条不重置的问题 by @kerwin612 ([#158](https://github.com/Tencent/tdesign-vue-next-starter/pull/158))
- 修复多标签页关闭逻辑缺陷 by @uyarn ([#156](https://github.com/Tencent/tdesign-vue-next-starter/pull/156))
## 🌈 0.3.1 `2022-05-13`
### 🚀 Features
- lint新增style scoped提示 by @kerwin612 ([#138](https://github.com/Tencent/tdesign-vue-next-starter/pull/138))
- 新增维护中页面 by @uyarn ([#146](https://github.com/Tencent/tdesign-vue-next-starter/pull/146))
- 升级组件库依赖至0.14+
### 🐞 Bug Fixes
- 修复多标签Tab页关闭左侧，关闭其他可能导致主页标签被删除 by @kerwin612 ([#148](https://github.com/Tencent/tdesign-vue-next-starter/pull/148))
- 修复多个滚动列表之间切换时页面不刷新导致的样式缺陷 by @kerwin612 ([#152](https://github.com/Tencent/tdesign-vue-next-starter/pull/152))
## 🌈 0.3.0 `2022-04-28`
### 🚀 Features
- 优化菜单选中判断逻辑 by @kerwin612 ([#132](https://github.com/Tencent/tdesign-vue-next-starter/pull/132))
- 升级组件库依赖至0.13 + 版本 by @uyarn ([#133](https://github.com/Tencent/tdesign-vue-next-starter/pull/133))
- 替换全部Card为`t-card`卡片组件，减少重复代码实现
- 调整图表相关代码目录结构，图表部分代码调整至所在Page内，减少各页面模块的耦合
- 调整表格相关代码及展示，增加吸顶功能展示、去除minWidth的使用等
### 🐞 Bug Fixes
- 修复分步表单页底部居中问题
- 修复顶部菜单栏下拉菜单与表单层级问题
## 🌈 0.2.3 `2022-04-26`
### 🚀 Features
- 补充mock示例 by @kerwin612 ([#127](https://github.com/Tencent/tdesign-vue-next-starter/pull/127))
### 🐞 Bug Fixes
- 修复顶部菜单栏未选中项样式问题 by @kerwin612 ([#131](https://github.com/Tencent/tdesign-vue-next-starter/pull/131))
- 修复搜索框样式异常问题 by @kerwin612 ([#130](https://github.com/Tencent/tdesign-vue-next-starter/pull/130))
- 修复顶部布局布局菜单样式问题 by @kerwin612 ([#129](https://github.com/Tencent/tdesign-vue-next-starter/pull/129))
## 🌈 0.2.2 `2022-04-06`
### 🚀 Features
- 支持多标签页支持持久化 by @uyarn ([#111](https://github.com/Tencent/tdesign-vue-next-starter/pull/111))
- 升级组件库依赖tdesign-vue-next至0.11版本 by @pengYYYYY
### 🐞 Bug Fixes
- 修复图表文字颜色异常 by @uyarn ([#112](https://github.com/Tencent/tdesign-vue-next-starter/pull/112))
- 修复mock roles模块错误 by @lscho ([#104](https://github.com/Tencent/tdesign-vue-next-starter/pull/104))
## 🌈 0.2.1 `2022-03-25`
### 🚀 Features
- 新增多标签Tab页功能 ([#98](https://github.com/Tencent/tdesign-vue-next-starter/pull/98))
## 🌈 0.2.0 `2022-03-04`
### 🚀 Features
- pinia替换vuex作为状态管理库 by @PengYYYYY
- 升级组件库依赖tdesign-vue-next至0.9版本
## 🌈 0.1.3 `2022-02-27`
### 🚀 Features
- 使用 `setup script` 重构了页面逻辑
### 🐞 Bug Fixes
- 修复菜单下拉与表格定位冲突
## 🌈 0.1.2 `2022-02-18`
### 🐞 Bug Fixes
- 修复面包屑点击跳转当前页错误的问题 by @ccccpj
## 🌈 0.1.1 `2022-01-27`
### 🐞 Bug Fixes
- 修复表单页检验提示未正常显示的问题
## 🌈 0.1.0 `2022-01-10`
### 🚀 Features
- 升级 `tdesign-vue-next` 版本到 `0.6.3`
### 🐞 Bug Fixes
- 修复一级菜单收起出现多余 `1` 的 bug
- 修复 `time-picker` 的文字覆盖
- 修复版本图表渲染问题

9
PUBLISH.md Normal file
View File

@ -0,0 +1,9 @@
# 版本发布流程
## 发布流程
- 从 `develop` 新建 `release/x.y.z` 分支，并修改 `package.json` 中的版本号，推送分支至远程仓库，并提交一个合入`develop`的 Pull Request 到仓库
- 仓库的 Github Action 会自动整理上个版本至今 commit 对应的 CHANGELOG，并将 CHANGELOG 的 draft 作为一个评论推送到该 Pull Request 上
- 发布人检查 CHANGELOG，并优化内容逻辑结构，确认无误后删除对于评论首行提示，Github Action 会将优化后的内容写入 CHANGELOG.md 内
- 确认无误后，合并分支入`develop`
合入 `develop` 后，仓库会触发 Github Action 合入 `main` 分支，并将版本号作为 `tag` 打在仓库上

2
README-zh_CN.md
View File

@ -9,7 +9,7 @@
</p> </p>
<p align="center"> <p align="center">
<a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatility"></a> <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatibility"></a>
<a href="https://github.com/Tencent/tdesign-vue-next/blob/develop/LICENSE"> <a href="https://github.com/Tencent/tdesign-vue-next/blob/develop/LICENSE">
<img src="https://img.shields.io/npm/l/tdesign-vue-next.svg?sanitize=true" alt="License"> <img src="https://img.shields.io/npm/l/tdesign-vue-next.svg?sanitize=true" alt="License">
</a> </a>

2
README.md
View File

@ -8,7 +8,7 @@
</p> </p>
<p align="center"> <p align="center">
<a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatility"></a> <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatibility"></a>
<a href="https://github.com/Tencent/tdesign-vue-next/blob/develop/LICENSE"> <a href="https://github.com/Tencent/tdesign-vue-next/blob/develop/LICENSE">
<img src="https://img.shields.io/npm/l/tdesign-vue-next.svg?sanitize=true" alt="License"> <img src="https://img.shields.io/npm/l/tdesign-vue-next.svg?sanitize=true" alt="License">
</a> </a>

10662
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@tencent/tdesign-vue-next-starter", "name": "@tencent/tdesign-vue-next-starter",
"version": "0.10.0", "version": "0.11.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev:mock": "vite --open --mode mock", "dev:mock": "vite --open --mode mock",
@ -27,12 +27,12 @@
"echarts": "5.4.3", "echarts": "5.4.3",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"pinia": "^2.1.7", "pinia": "2.1.7",
"pinia-plugin-persistedstate": "^3.2.0", "pinia-plugin-persistedstate": "^3.2.0",
"qrcode.vue": "^3.4.1", "qrcode.vue": "^3.4.1",
"qs": "^6.11.2", "qs": "^6.11.2",
"tdesign-icons-vue-next": "^0.2.2", "tdesign-icons-vue-next": "^0.2.2",
"tdesign-vue-next": "^1.9.3", "tdesign-vue-next": "^1.9.9",
"tvision-color": "^1.6.0", "tvision-color": "^1.6.0",
"vue": "3.3.13", "vue": "3.3.13",
"vue-i18n": "^9.9.1", "vue-i18n": "^9.9.1",
@ -42,7 +42,8 @@
"@commitlint/cli": "^18.6.0", "@commitlint/cli": "^18.6.0",
"@commitlint/config-conventional": "^18.6.0", "@commitlint/config-conventional": "^18.6.0",
"@types/echarts": "^4.9.21", "@types/echarts": "^4.9.21",
"@types/lodash": "^4.14.201", "@types/lodash": "^4.17.6",
"@types/mockjs": "^1.0.10",
"@types/nprogress": "^0.2.3", "@types/nprogress": "^0.2.3",
"@types/qs": "^6.9.11", "@types/qs": "^6.9.11",
"@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/eslint-plugin": "^6.21.0",

44
src/components/common-table/index.vue
View File

@ -5,45 +5,45 @@
<t-col :span="10"> <t-col :span="10">
<t-row :gutter="[24, 24]"> <t-row :gutter="[24, 24]">
<t-col :span="4"> <t-col :span="4">
<t-form-item :label="$t('components.commonTable.contractName')" name="name"> <t-form-item :label="t('components.commonTable.contractName')" name="name">
<t-input <t-input
v-model="formData.name" v-model="formData.name"
class="form-item-content" class="form-item-content"
type="search" type="search"
:placeholder="$t('components.commonTable.contractNamePlaceholder')" :placeholder="t('components.commonTable.contractNamePlaceholder')"
:style="{ minWidth: '134px' }" :style="{ minWidth: '134px' }"
/> />
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="4"> <t-col :span="4">
<t-form-item :label="$t('components.commonTable.contractStatus')" name="status"> <t-form-item :label="t('components.commonTable.contractStatus')" name="status">
<t-select <t-select
v-model="formData.status" v-model="formData.status"
class="form-item-content" class="form-item-content"
:options="CONTRACT_STATUS_OPTIONS" :options="CONTRACT_STATUS_OPTIONS"
:placeholder="$t('components.commonTable.contractStatusPlaceholder')" :placeholder="t('components.commonTable.contractStatusPlaceholder')"
clearable clearable
/> />
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="4"> <t-col :span="4">
<t-form-item :label="$t('components.commonTable.contractNum')" name="no"> <t-form-item :label="t('components.commonTable.contractNum')" name="no">
<t-input <t-input
v-model="formData.no" v-model="formData.no"
class="form-item-content" class="form-item-content"
:placeholder="$t('components.commonTable.contractNumPlaceholder')" :placeholder="t('components.commonTable.contractNumPlaceholder')"
:style="{ minWidth: '134px' }" :style="{ minWidth: '134px' }"
/> />
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="4"> <t-col :span="4">
<t-form-item :label="$t('components.commonTable.contractType')" name="type"> <t-form-item :label="t('components.commonTable.contractType')" name="type">
<t-select <t-select
v-model="formData.type" v-model="formData.type"
style="display: inline-block" style="display: inline-block"
class="form-item-content" class="form-item-content"
:options="CONTRACT_TYPE_OPTIONS" :options="CONTRACT_TYPE_OPTIONS"
:placeholder="$t('components.commonTable.contractTypePlaceholder')" :placeholder="t('components.commonTable.contractTypePlaceholder')"
clearable clearable
/> />
</t-form-item> </t-form-item>
@ -53,9 +53,9 @@
<t-col :span="2" class="operation-container"> <t-col :span="2" class="operation-container">
<t-button theme="primary" type="submit" :style="{ marginLeft: 'var(--td-comp-margin-s)' }"> <t-button theme="primary" type="submit" :style="{ marginLeft: 'var(--td-comp-margin-s)' }">
{{ $t('components.commonTable.query') }} {{ t('components.commonTable.query') }}
</t-button> </t-button>
<t-button type="reset" variant="base" theme="default"> {{ $t('components.commonTable.reset') }} </t-button> <t-button type="reset" variant="base" theme="default"> {{ t('components.commonTable.reset') }} </t-button>
</t-col> </t-col>
</t-row> </t-row>
</t-form> </t-form>
@ -75,40 +75,40 @@
> >
<template #status="{ row }"> <template #status="{ row }">
<t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light"> <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">
{{ $t('components.commonTable.contractStatusEnum.fail') }} {{ t('components.commonTable.contractStatusEnum.fail') }}
</t-tag> </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light"> <t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light">
{{ $t('components.commonTable.contractStatusEnum.audit') }} {{ t('components.commonTable.contractStatusEnum.audit') }}
</t-tag> </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light"> <t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light">
{{ $t('components.commonTable.contractStatusEnum.pending') }} {{ t('components.commonTable.contractStatusEnum.pending') }}
</t-tag> </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light"> <t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light">
{{ $t('components.commonTable.contractStatusEnum.executing') }} {{ t('components.commonTable.contractStatusEnum.executing') }}
</t-tag> </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light"> <t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light">
{{ $t('components.commonTable.contractStatusEnum.finish') }} {{ t('components.commonTable.contractStatusEnum.finish') }}
</t-tag> </t-tag>
</template> </template>
<template #contractType="{ row }"> <template #contractType="{ row }">
<p v-if="row.contractType === CONTRACT_TYPES.MAIN">{{ $t('pages.listBase.contractStatusEnum.fail') }}</p> <p v-if="row.contractType === CONTRACT_TYPES.MAIN">{{ t('pages.listBase.contractStatusEnum.fail') }}</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUB">{{ $t('pages.listBase.contractStatusEnum.audit') }}</p> <p v-if="row.contractType === CONTRACT_TYPES.SUB">{{ t('pages.listBase.contractStatusEnum.audit') }}</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT"> <p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">
{{ $t('pages.listBase.contractStatusEnum.pending') }} {{ t('pages.listBase.contractStatusEnum.pending') }}
</p> </p>
</template> </template>
<template #paymentType="{ row }"> <template #paymentType="{ row }">
<div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col"> <div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
{{ $t('pages.listBase.pay') }}<trend class="dashboard-item-trend" type="up" /> {{ t('pages.listBase.pay') }}<trend class="dashboard-item-trend" type="up" />
</div> </div>
<div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECEIPT" class="payment-col"> <div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECEIPT" class="payment-col">
{{ $t('pages.listBase.receive') }}<trend class="dashboard-item-trend" type="down" /> {{ t('pages.listBase.receive') }}<trend class="dashboard-item-trend" type="down" />
</div> </div>
</template> </template>
<template #op="slotProps"> <template #op="slotProps">
<t-space> <t-space>
<t-link theme="primary" @click="handleClickDetail()"> {{ $t('pages.listBase.detail') }}</t-link> <t-link theme="primary" @click="handleClickDetail()"> {{ t('pages.listBase.detail') }}</t-link>
<t-link theme="danger" @click="handleClickDelete(slotProps)"> {{ $t('pages.listBase.delete') }}</t-link> <t-link theme="danger" @click="handleClickDelete(slotProps)"> {{ t('pages.listBase.delete') }}</t-link>
</t-space> </t-space>
</template> </template>
</t-table> </t-table>

8
src/components/product-card/index.vue
View File

@ -13,7 +13,7 @@
</template> </template>
<template #status> <template #status>
<t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">{{ <t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">{{
product.isSetup ? $t('components.isSetup.on') : $t('components.isSetup.off') product.isSetup ? t('components.isSetup.on') : t('components.isSetup.off')
}}</t-tag> }}</t-tag>
</template> </template>
<template #content> <template #content>
@ -36,12 +36,12 @@
trigger="click" trigger="click"
:options="[ :options="[
{ {
content: $t('components.manage'), content: t('components.manage'),
value: 'manage', value: 'manage',
onClick: () => handleClickManage(product), onClick: () => handleClickManage(product),
}, },
{ {
content: $t('components.delete'), content: t('components.delete'),
value: 'delete', value: 'delete',
onClick: () => handleClickDelete(product), onClick: () => handleClickDelete(product),
}, },
@ -66,6 +66,8 @@ import {
} from 'tdesign-icons-vue-next'; } from 'tdesign-icons-vue-next';
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import { t } from '@/locales';
export interface CardProductType { export interface CardProductType {
type: number; type: number;
isSetup: boolean; isSetup: boolean;

1
src/config/style.ts
View File

@ -2,6 +2,7 @@ export default {
showFooter: true, showFooter: true,
isSidebarCompact: false, isSidebarCompact: false,
showBreadcrumb: false, showBreadcrumb: false,
menuAutoCollapsed: false,
mode: 'light', mode: 'light',
layout: 'side', layout: 'side',
splitMenu: false, splitMenu: false,

2
src/layouts/components/Breadcrumb.vue
View File

@ -37,7 +37,7 @@ const crumbs = computed(() => {
} }
breadcrumbArray.push({ breadcrumbArray.push({
path, path,
to: breadcrumbArray[idx - 1] ? `/${breadcrumbArray[idx - 1].path}/${path}` : `/${path}`, to: breadcrumbArray[idx - 1] ? `${breadcrumbArray[idx - 1].to}/${path}` : `/${path}`,
title, title,
}); });
return breadcrumbArray; return breadcrumbArray;

12
src/layouts/components/Header.vue
View File

@ -23,12 +23,12 @@
<!-- 全局通知 --> <!-- 全局通知 -->
<notice /> <notice />
<t-tooltip placement="bottom" :content="$t('layout.header.code')"> <t-tooltip placement="bottom" :content="t('layout.header.code')">
<t-button theme="default" shape="square" variant="text" @click="navToGitHub"> <t-button theme="default" shape="square" variant="text" @click="navToGitHub">
<t-icon name="logo-github" /> <t-icon name="logo-github" />
</t-button> </t-button>
</t-tooltip> </t-tooltip>
<t-tooltip placement="bottom" :content="$t('layout.header.help')"> <t-tooltip placement="bottom" :content="t('layout.header.help')">
<t-button theme="default" shape="square" variant="text" @click="navToHelper"> <t-button theme="default" shape="square" variant="text" @click="navToHelper">
<t-icon name="help-circle" /> <t-icon name="help-circle" />
</t-button> </t-button>
@ -51,10 +51,10 @@
<template #dropdown> <template #dropdown>
<t-dropdown-menu> <t-dropdown-menu>
<t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')"> <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
<user-circle-icon />{{ $t('layout.header.user') }} <user-circle-icon />{{ t('layout.header.user') }}
</t-dropdown-item> </t-dropdown-item>
<t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout"> <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
<poweroff-icon />{{ $t('layout.header.signOut') }} <poweroff-icon />{{ t('layout.header.signOut') }}
</t-dropdown-item> </t-dropdown-item>
</t-dropdown-menu> </t-dropdown-menu>
</template> </template>
@ -66,7 +66,7 @@
<template #suffix><chevron-down-icon /></template> <template #suffix><chevron-down-icon /></template>
</t-button> </t-button>
</t-dropdown> </t-dropdown>
<t-tooltip placement="bottom" :content="$t('layout.header.setting')"> <t-tooltip placement="bottom" :content="t('layout.header.setting')">
<t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel"> <t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
<setting-icon /> <setting-icon />
</t-button> </t-button>
@ -85,7 +85,7 @@ import { useRouter } from 'vue-router';
import LogoFull from '@/assets/assets-logo-full.svg?component'; import LogoFull from '@/assets/assets-logo-full.svg?component';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import { langList } from '@/locales/index'; import { langList, t } from '@/locales';
import { useLocale } from '@/locales/useLocale'; import { useLocale } from '@/locales/useLocale';
import { getActive } from '@/router'; import { getActive } from '@/router';
import { useSettingStore, useUserStore } from '@/store'; import { useSettingStore, useUserStore } from '@/store';

9
src/layouts/components/LayoutContent.vue
View File

@ -37,22 +37,22 @@
<t-dropdown-menu> <t-dropdown-menu>
<t-dropdown-item @click="() => handleRefresh(routeItem, index)"> <t-dropdown-item @click="() => handleRefresh(routeItem, index)">
<t-icon name="refresh" /> <t-icon name="refresh" />
{{ $t('layout.tagTabs.refresh') }} {{ t('layout.tagTabs.refresh') }}
</t-dropdown-item> </t-dropdown-item>
<t-dropdown-item v-if="index > 1" @click="() => handleCloseAhead(routeItem.path, index)"> <t-dropdown-item v-if="index > 1" @click="() => handleCloseAhead(routeItem.path, index)">
<t-icon name="arrow-left" /> <t-icon name="arrow-left" />
{{ $t('layout.tagTabs.closeLeft') }} {{ t('layout.tagTabs.closeLeft') }}
</t-dropdown-item> </t-dropdown-item>
<t-dropdown-item <t-dropdown-item
v-if="index < tabRouters.length - 1" v-if="index < tabRouters.length - 1"
@click="() => handleCloseBehind(routeItem.path, index)" @click="() => handleCloseBehind(routeItem.path, index)"
> >
<t-icon name="arrow-right" /> <t-icon name="arrow-right" />
{{ $t('layout.tagTabs.closeRight') }} {{ t('layout.tagTabs.closeRight') }}
</t-dropdown-item> </t-dropdown-item>
<t-dropdown-item v-if="tabRouters.length > 2" @click="() => handleCloseOther(routeItem.path, index)"> <t-dropdown-item v-if="tabRouters.length > 2" @click="() => handleCloseOther(routeItem.path, index)">
<t-icon name="close-circle" /> <t-icon name="close-circle" />
{{ $t('layout.tagTabs.closeOther') }} {{ t('layout.tagTabs.closeOther') }}
</t-dropdown-item> </t-dropdown-item>
</t-dropdown-menu> </t-dropdown-menu>
</template> </template>
@ -76,6 +76,7 @@ import { computed, nextTick, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import { t } from '@/locales';
import { useLocale } from '@/locales/useLocale'; import { useLocale } from '@/locales/useLocale';
import { useSettingStore, useTabsRouterStore } from '@/store'; import { useSettingStore, useTabsRouterStore } from '@/store';
import type { TRouterInfo, TTabRemoveOptions } from '@/types/interface'; import type { TRouterInfo, TTabRemoveOptions } from '@/types/interface';

11
src/layouts/components/Notice.vue
View File

@ -3,14 +3,14 @@
<template #content> <template #content>
<div class="header-msg"> <div class="header-msg">
<div class="header-msg-top"> <div class="header-msg-top">
<p>{{ $t('layout.notice.title') }}</p> <p>{{ t('layout.notice.title') }}</p>
<t-button <t-button
v-if="unreadMsg.length > 0" v-if="unreadMsg.length > 0"
class="clear-btn" class="clear-btn"
variant="text" variant="text"
theme="primary" theme="primary"
@click="setRead('all')" @click="setRead('all')"
>{{ $t('layout.notice.clear') }}</t-button >{{ t('layout.notice.clear') }}</t-button
> >
</div> </div>
<t-list v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="false"> <t-list v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="false">
@ -22,7 +22,7 @@
<p class="msg-time">{{ item.date }}</p> <p class="msg-time">{{ item.date }}</p>
<template #action> <template #action>
<t-button size="small" variant="outline" @click="setRead('radio', item)"> <t-button size="small" variant="outline" @click="setRead('radio', item)">
{{ $t('layout.notice.setRead') }} {{ t('layout.notice.setRead') }}
</t-button> </t-button>
</template> </template>
</t-list-item> </t-list-item>
@ -30,11 +30,11 @@
<div v-else class="empty-list"> <div v-else class="empty-list">
<img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" /> <img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" />
<p>{{ $t('layout.notice.empty') }}</p> <p>{{ t('layout.notice.empty') }}</p>
</div> </div>
<div v-if="unreadMsg.length > 0" class="header-msg-bottom"> <div v-if="unreadMsg.length > 0" class="header-msg-bottom">
<t-button class="header-msg-bottom-link" variant="text" theme="default" block @click="goDetail">{{ <t-button class="header-msg-bottom-link" variant="text" theme="default" block @click="goDetail">{{
$t('layout.notice.viewAll') t('layout.notice.viewAll')
}}</t-button> }}</t-button>
</div> </div>
</div> </div>
@ -51,6 +51,7 @@
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { t } from '@/locales';
import { useNotificationStore } from '@/store'; import { useNotificationStore } from '@/store';
import type { NotificationItem } from '@/types/interface'; import type { NotificationItem } from '@/types/interface';

4
src/layouts/components/Search.vue
View File

@ -2,7 +2,7 @@
<div v-if="layout === 'side'" class="header-menu-search"> <div v-if="layout === 'side'" class="header-menu-search">
<t-input <t-input
:class="['header-search', { 'hover-active': isSearchFocus }]" :class="['header-search', { 'hover-active': isSearchFocus }]"
:placeholder="$t('layout.searchPlaceholder')" :placeholder="t('layout.searchPlaceholder')"
@blur="changeSearchFocus(false)" @blur="changeSearchFocus(false)"
@focus="changeSearchFocus(true)" @focus="changeSearchFocus(true)"
> >
@ -39,6 +39,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { t } from '@/locales';
defineProps({ defineProps({
layout: String, layout: String,
}); });

40
src/layouts/components/SideNav.vue
View File

@ -1,6 +1,14 @@
<template> <template>
<div :class="sideNavCls"> <div :class="sideNavCls">
<t-menu :class="menuCls" :theme="theme" :value="active" :collapsed="collapsed" :default-expanded="defaultExpanded"> <t-menu
:class="menuCls"
:theme="theme"
:value="active"
:collapsed="collapsed"
:expanded="expanded"
:expand-mutex="menuAutoCollapsed"
@expand="onExpanded"
>
<template #logo> <template #logo>
<span v-if="showLogo" :class="`${prefix}-side-nav-logo-wrapper`" @click="goHome"> <span v-if="showLogo" :class="`${prefix}-side-nav-logo-wrapper`" @click="goHome">
<component :is="getLogo()" :class="logoCls" /> <component :is="getLogo()" :class="logoCls" />
@ -16,15 +24,16 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import union from 'lodash/union'; import { difference, remove, union } from 'lodash';
import { MenuValue } from 'tdesign-vue-next';
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import { computed, onMounted } from 'vue'; import { computed, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import AssetLogoFull from '@/assets/assets-logo-full.svg?component'; import AssetLogoFull from '@/assets/assets-logo-full.svg?component';
import AssetLogo from '@/assets/assets-t-logo.svg?component'; import AssetLogo from '@/assets/assets-t-logo.svg?component';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import { getActive, getRoutesExpanded } from '@/router'; import { getActive } from '@/router';
import { useSettingStore } from '@/store'; import { useSettingStore } from '@/store';
import type { MenuRoute, ModeType } from '@/types/interface'; import type { MenuRoute, ModeType } from '@/types/interface';
@ -65,15 +74,27 @@ const props = defineProps({
}); });
const collapsed = computed(() => useSettingStore().isSidebarCompact); const collapsed = computed(() => useSettingStore().isSidebarCompact);
const menuAutoCollapsed = computed(() => useSettingStore().menuAutoCollapsed);
const active = computed(() => getActive()); const active = computed(() => getActive());
const defaultExpanded = computed(() => { const expanded = ref<MenuValue[]>([]);
watch(
() => active.value,
() => {
const path = getActive(); const path = getActive();
const parentPath = path.substring(0, path.lastIndexOf('/')); const parentPath = path.substring(0, path.lastIndexOf('/'));
const expanded = getRoutesExpanded(); expanded.value = menuAutoCollapsed.value ? [parentPath] : union([parentPath], expanded.value);
return union(expanded, parentPath === '' ? [] : [parentPath]); },
}); );
const onExpanded = (value: MenuValue[]) => {
const currentOperationMenu = difference(expanded.value, value);
const allExpanded = union(value, expanded.value);
remove(allExpanded, (item) => currentOperationMenu.includes(item));
expanded.value = allExpanded;
};
const sideMode = computed(() => { const sideMode = computed(() => {
const { theme } = props; const { theme } = props;
@ -127,6 +148,9 @@ const autoCollapsed = () => {
}; };
onMounted(() => { onMounted(() => {
const path = getActive();
const parentPath = path.substring(0, path.lastIndexOf('/'));
expanded.value = union([parentPath], expanded.value);
autoCollapsed(); autoCollapsed();
window.onresize = () => { window.onresize = () => {
autoCollapsed(); autoCollapsed();

39
src/layouts/setting.vue
View File

@ -3,14 +3,14 @@
v-model:visible="showSettingPanel" v-model:visible="showSettingPanel"
size="408px" size="408px"
:footer="false" :footer="false"
:header="$t('layout.setting.title')" :header="t('layout.setting.title')"
:close-btn="true" :close-btn="true"
class="setting-drawer-container" class="setting-drawer-container"
@close-btn-click="handleCloseDrawer" @close-btn-click="handleCloseDrawer"
> >
<div class="setting-container"> <div class="setting-container">
<t-form ref="form" :data="formData" label-align="left"> <t-form ref="form" :data="formData" label-align="left">
<div class="setting-group-title">{{ $t('layout.setting.theme.mode') }}</div> <div class="setting-group-title">{{ t('layout.setting.theme.mode') }}</div>
<t-radio-group v-model="formData.mode"> <t-radio-group v-model="formData.mode">
<div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer"> <div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer">
<div> <div>
@ -21,7 +21,7 @@
</div> </div>
</div> </div>
</t-radio-group> </t-radio-group>
<div class="setting-group-title">{{ $t('layout.setting.theme.color') }}</div> <div class="setting-group-title">{{ t('layout.setting.theme.color') }}</div>
<t-radio-group v-model="formData.brandTheme"> <t-radio-group v-model="formData.brandTheme">
<div v-for="(item, index) in DEFAULT_COLOR_OPTIONS" :key="index" class="setting-layout-drawer"> <div v-for="(item, index) in DEFAULT_COLOR_OPTIONS" :key="index" class="setting-layout-drawer">
<t-radio-button :key="index" :value="item" class="setting-layout-color-group"> <t-radio-button :key="index" :value="item" class="setting-layout-color-group">
@ -52,7 +52,7 @@
</t-popup> </t-popup>
</div> </div>
</t-radio-group> </t-radio-group>
<div class="setting-group-title">{{ $t('layout.setting.navigationLayout') }}</div> <div class="setting-group-title">{{ t('layout.setting.navigationLayout') }}</div>
<t-radio-group v-model="formData.layout"> <t-radio-group v-model="formData.layout">
<div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer"> <div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer">
<t-radio-button :key="index" :value="item"> <t-radio-button :key="index" :value="item">
@ -61,45 +61,44 @@
</div> </div>
</t-radio-group> </t-radio-group>
<t-form-item v-show="formData.layout === 'mix'" :label="$t('layout.setting.splitMenu')" name="splitMenu"> <t-form-item v-show="formData.layout === 'mix'" :label="t('layout.setting.splitMenu')" name="splitMenu">
<t-switch v-model="formData.splitMenu" /> <t-switch v-model="formData.splitMenu" />
</t-form-item> </t-form-item>
<t-form-item <t-form-item v-show="formData.layout === 'mix'" :label="t('layout.setting.fixedSidebar')" name="isSidebarFixed">
v-show="formData.layout === 'mix'"
:label="$t('layout.setting.fixedSidebar')"
name="isSidebarFixed"
>
<t-switch v-model="formData.isSidebarFixed" /> <t-switch v-model="formData.isSidebarFixed" />
</t-form-item> </t-form-item>
<div class="setting-group-title">{{ $t('layout.setting.element.title') }}</div> <div class="setting-group-title">{{ t('layout.setting.element.title') }}</div>
<t-form-item :label="$t('layout.setting.sideMode')" name="sideMode"> <t-form-item :label="t('layout.setting.sideMode')" name="sideMode">
<t-radio-group v-model="formData.sideMode" class="side-mode-radio"> <t-radio-group v-model="formData.sideMode" class="side-mode-radio">
<t-radio-button key="light" value="light" :label="$t('layout.setting.theme.options.light')" /> <t-radio-button key="light" value="light" :label="t('layout.setting.theme.options.light')" />
<t-radio-button key="dark" value="dark" :label="$t('layout.setting.theme.options.dark')" /> <t-radio-button key="dark" value="dark" :label="t('layout.setting.theme.options.dark')" />
</t-radio-group> </t-radio-group>
</t-form-item> </t-form-item>
<t-form-item <t-form-item
v-show="formData.layout === 'side'" v-show="formData.layout === 'side'"
:label="$t('layout.setting.element.showHeader')" :label="t('layout.setting.element.showHeader')"
name="showHeader" name="showHeader"
> >
<t-switch v-model="formData.showHeader" /> <t-switch v-model="formData.showHeader" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('layout.setting.element.showBreadcrumb')" name="showBreadcrumb"> <t-form-item :label="t('layout.setting.element.showBreadcrumb')" name="showBreadcrumb">
<t-switch v-model="formData.showBreadcrumb" /> <t-switch v-model="formData.showBreadcrumb" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('layout.setting.element.showFooter')" name="showFooter"> <t-form-item :label="t('layout.setting.element.showFooter')" name="showFooter">
<t-switch v-model="formData.showFooter" /> <t-switch v-model="formData.showFooter" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('layout.setting.element.useTagTabs')" name="isUseTabsRouter"> <t-form-item :label="t('layout.setting.element.useTagTabs')" name="isUseTabsRouter">
<t-switch v-model="formData.isUseTabsRouter"></t-switch> <t-switch v-model="formData.isUseTabsRouter"></t-switch>
</t-form-item> </t-form-item>
<t-form-item :label="t('layout.setting.element.menuAutoCollapsed')" name="menuAutoCollapsed">
<t-switch v-model="formData.menuAutoCollapsed"></t-switch>
</t-form-item>
</t-form> </t-form>
<div class="setting-info"> <div class="setting-info">
<p>{{ $t('layout.setting.tips') }}</p> <p>{{ t('layout.setting.tips') }}</p>
<t-button theme="primary" variant="text" @click="handleCopy"> <t-button theme="primary" variant="text" @click="handleCopy">
{{ $t('layout.setting.copy.title') }} {{ t('layout.setting.copy.title') }}
</t-button> </t-button>
</div> </div>
</div> </div>

1
src/locales/lang/en_US/layout.ts
View File

@ -42,6 +42,7 @@ export default {
showBreadcrumb: 'Show Breadcrumb', showBreadcrumb: 'Show Breadcrumb',
showFooter: 'Show Footer', showFooter: 'Show Footer',
useTagTabs: 'Use Tag Tabs', useTagTabs: 'Use Tag Tabs',
menuAutoCollapsed: 'Menu Auto Collapsed',
}, },
tips: 'Please copy and manually modify the configuration file: /src/config/style.ts', tips: 'Please copy and manually modify the configuration file: /src/config/style.ts',
copy: { copy: {

1
src/locales/lang/zh_CN/layout.ts
View File

@ -42,6 +42,7 @@ export default {
showBreadcrumb: '显示面包屑', showBreadcrumb: '显示面包屑',
showFooter: '显示页脚', showFooter: '显示页脚',
useTagTabs: '展示多标签Tab页', useTagTabs: '展示多标签Tab页',
menuAutoCollapsed: '菜单自动折叠',
}, },
tips: '请复制后手动修改配置文件: /src/config/style.ts', tips: '请复制后手动修改配置文件: /src/config/style.ts',
copy: { copy: {

5
src/pages/dashboard/base/components/MiddleChart.vue
View File

@ -2,7 +2,7 @@
<t-row :gutter="16" class="row-container"> <t-row :gutter="16" class="row-container">
<t-col :xs="12" :xl="9"> <t-col :xs="12" :xl="9">
<t-card <t-card
:title="$t('pages.dashboardBase.topPanel.analysis.title')" :title="t('pages.dashboardBase.topPanel.analysis.title')"
:subtitle="currentMonth" :subtitle="currentMonth"
class="dashboard-chart-card" class="dashboard-chart-card"
:bordered="false" :bordered="false"
@ -27,7 +27,7 @@
</t-col> </t-col>
<t-col :xs="12" :xl="3"> <t-col :xs="12" :xl="3">
<t-card <t-card
:title="$t('pages.dashboardBase.topPanel.analysis.channels')" :title="t('pages.dashboardBase.topPanel.analysis.channels')"
:subtitle="currentMonth" :subtitle="currentMonth"
class="dashboard-chart-card" class="dashboard-chart-card"
:bordered="false" :bordered="false"
@ -50,6 +50,7 @@ import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { computed, nextTick, onDeactivated, onMounted, ref, watch } from 'vue'; import { computed, nextTick, onDeactivated, onMounted, ref, watch } from 'vue';
import { t } from '@/locales';
import { useSettingStore } from '@/store'; import { useSettingStore } from '@/store';
import { changeChartsTheme } from '@/utils/color'; import { changeChartsTheme } from '@/utils/color';
import { LAST_7_DAYS } from '@/utils/date'; import { LAST_7_DAYS } from '@/utils/date';

15
src/pages/dashboard/base/components/OutputOverview.vue
View File

@ -4,8 +4,8 @@
<t-col :xs="12" :xl="9"> <t-col :xs="12" :xl="9">
<t-card <t-card
:bordered="false" :bordered="false"
:title="$t('pages.dashboardBase.outputOverview.title')" :title="t('pages.dashboardBase.outputOverview.title')"
:subtitle="$t('pages.dashboardBase.outputOverview.subtitle')" :subtitle="t('pages.dashboardBase.outputOverview.subtitle')"
:class="{ 'dashboard-overview-card': true, 'overview-panel': true }" :class="{ 'dashboard-overview-card': true, 'overview-panel': true }"
> >
<template #actions> <template #actions>
@ -23,19 +23,19 @@
<t-col :xs="12" :xl="3"> <t-col :xs="12" :xl="3">
<t-card :bordered="false" :class="{ 'dashboard-overview-card': true, 'export-panel': true }"> <t-card :bordered="false" :class="{ 'dashboard-overview-card': true, 'export-panel': true }">
<template #actions> <template #actions>
<t-button>{{ $t('pages.dashboardBase.outputOverview.export') }}</t-button> <t-button>{{ t('pages.dashboardBase.outputOverview.export') }}</t-button>
</template> </template>
<t-row> <t-row>
<t-col :xs="6" :xl="12"> <t-col :xs="6" :xl="12">
<t-card <t-card
:bordered="false" :bordered="false"
:subtitle="$t('pages.dashboardBase.outputOverview.month.input')" :subtitle="t('pages.dashboardBase.outputOverview.month.input')"
class="inner-card" class="inner-card"
> >
<div class="inner-card__content"> <div class="inner-card__content">
<div class="inner-card__content-title">1726</div> <div class="inner-card__content-title">1726</div>
<div class="inner-card__content-footer"> <div class="inner-card__content-footer">
{{ $t('pages.dashboardBase.outputOverview.since') }} {{ t('pages.dashboardBase.outputOverview.since') }}
<trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" /> <trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
</div> </div>
</div> </div>
@ -44,13 +44,13 @@
<t-col :xs="6" :xl="12"> <t-col :xs="6" :xl="12">
<t-card <t-card
:bordered="false" :bordered="false"
:subtitle="$t('pages.dashboardBase.outputOverview.month.output')" :subtitle="t('pages.dashboardBase.outputOverview.month.output')"
class="inner-card" class="inner-card"
> >
<div class="inner-card__content"> <div class="inner-card__content">
<div class="inner-card__content-title">226</div> <div class="inner-card__content-title">226</div>
<div class="inner-card__content-footer"> <div class="inner-card__content-footer">
{{ $t('pages.dashboardBase.outputOverview.since') }} {{ t('pages.dashboardBase.outputOverview.since') }}
<trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" /> <trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
</div> </div>
</div> </div>
@ -79,6 +79,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
// 导入样式 // 导入样式
import Trend from '@/components/trend/index.vue'; import Trend from '@/components/trend/index.vue';
import { t } from '@/locales';
import { useSettingStore } from '@/store'; import { useSettingStore } from '@/store';
import { changeChartsTheme } from '@/utils/color'; import { changeChartsTheme } from '@/utils/color';
import { LAST_7_DAYS } from '@/utils/date'; import { LAST_7_DAYS } from '@/utils/date';

16
src/pages/dashboard/base/components/RankList.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<t-row :gutter="16" class="row-container"> <t-row :gutter="16" class="row-container">
<t-col :xs="12" :xl="6"> <t-col :xs="12" :xl="6">
<t-card :title="$t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false"> <t-card :title="t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false">
<template #actions> <template #actions>
<t-radio-group default-value="dateVal" variant="default-filled"> <t-radio-group default-value="dateVal" variant="default-filled">
<t-radio-button value="dateVal">{{ $t('pages.dashboardBase.rankList.week') }}</t-radio-button> <t-radio-button value="dateVal">{{ t('pages.dashboardBase.rankList.week') }}</t-radio-button>
<t-radio-button value="monthVal">{{ $t('pages.dashboardBase.rankList.month') }}</t-radio-button> <t-radio-button value="monthVal">{{ t('pages.dashboardBase.rankList.month') }}</t-radio-button>
</t-radio-group> </t-radio-group>
</template> </template>
<t-table :data="SALE_TEND_LIST" :columns="SALE_COLUMNS" row-key="productName"> <t-table :data="SALE_TEND_LIST" :columns="SALE_COLUMNS" row-key="productName">
@ -21,18 +21,18 @@
</template> </template>
<template #operation="slotProps"> <template #operation="slotProps">
<t-link theme="primary" @click="rehandleClickOp(slotProps)">{{ <t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
$t('pages.dashboardBase.rankList.info') t('pages.dashboardBase.rankList.info')
}}</t-link> }}</t-link>
</template> </template>
</t-table> </t-table>
</t-card> </t-card>
</t-col> </t-col>
<t-col :xs="12" :xl="6"> <t-col :xs="12" :xl="6">
<t-card :title="$t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false"> <t-card :title="t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false">
<template #actions> <template #actions>
<t-radio-group default-value="dateVal" variant="default-filled"> <t-radio-group default-value="dateVal" variant="default-filled">
<t-radio-button value="dateVal">{{ $t('pages.dashboardBase.rankList.week') }}</t-radio-button> <t-radio-button value="dateVal">{{ t('pages.dashboardBase.rankList.week') }}</t-radio-button>
<t-radio-button value="monthVal">{{ $t('pages.dashboardBase.rankList.month') }}</t-radio-button> <t-radio-button value="monthVal">{{ t('pages.dashboardBase.rankList.month') }}</t-radio-button>
</t-radio-group> </t-radio-group>
</template> </template>
<t-table :data="BUY_TEND_LIST" :columns="BUY_COLUMNS" row-key="productName"> <t-table :data="BUY_TEND_LIST" :columns="BUY_COLUMNS" row-key="productName">
@ -46,7 +46,7 @@
</template> </template>
<template #operation="slotProps"> <template #operation="slotProps">
<t-link theme="primary" @click="rehandleClickOp(slotProps)">{{ <t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
$t('pages.dashboardBase.rankList.info') t('pages.dashboardBase.rankList.info')
}}</t-link> }}</t-link>
</template> </template>
</t-table> </t-table>

2
src/pages/dashboard/base/components/TopPanel.vue
View File

@ -32,7 +32,7 @@
<template #footer> <template #footer>
<div class="dashboard-item-bottom"> <div class="dashboard-item-bottom">
<div class="dashboard-item-block"> <div class="dashboard-item-block">
{{ $t('pages.dashboardBase.topPanel.cardTips') }} {{ t('pages.dashboardBase.topPanel.cardTips') }}
<trend <trend
class="dashboard-item-trend" class="dashboard-item-trend"
:type="item.upTrend ? 'up' : 'down'" :type="item.upTrend ? 'up' : 'down'"

11
src/pages/dashboard/detail/index.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="dashboard-panel-detail"> <div class="dashboard-panel-detail">
<t-card :title="$t('pages.dashboardDetail.topPanel.title')" class="dashboard-detail-card" :bordered="false"> <t-card :title="t('pages.dashboardDetail.topPanel.title')" class="dashboard-detail-card" :bordered="false">
<t-row :gutter="[16, 16]"> <t-row :gutter="[16, 16]">
<t-col v-for="(item, index) in PANE_LIST_DATA" :key="index" :xs="6" :xl="3"> <t-col v-for="(item, index) in PANE_LIST_DATA" :key="index" :xs="6" :xl="3">
<t-card class="dashboard-list-card" :description="item.title"> <t-card class="dashboard-list-card" :description="item.title">
<div class="dashboard-list-card__number">{{ item.number }}</div> <div class="dashboard-list-card__number">{{ item.number }}</div>
<div class="dashboard-list-card__text"> <div class="dashboard-list-card__text">
<div class="dashboard-list-card__text-left"> <div class="dashboard-list-card__text-left">
{{ $t('pages.dashboardDetail.topPanel.quarter') }} {{ t('pages.dashboardDetail.topPanel.quarter') }}
<trend class="icon" :type="item.upTrend ? 'up' : 'down'" :describe="item.upTrend || item.downTrend" /> <trend class="icon" :type="item.upTrend ? 'up' : 'down'" :describe="item.upTrend || item.downTrend" />
</div> </div>
<t-icon name="chevron-right" /> <t-icon name="chevron-right" />
@ -18,7 +18,7 @@
</t-card> </t-card>
<t-row :gutter="[16, 16]" class="row-margin"> <t-row :gutter="[16, 16]" class="row-margin">
<t-col :xs="12" :xl="9"> <t-col :xs="12" :xl="9">
<t-card class="dashboard-detail-card" :title="$t('pages.dashboardDetail.procurement.title')" :bordered="false"> <t-card class="dashboard-detail-card" :title="t('pages.dashboardDetail.procurement.title')" :bordered="false">
<template #actions> <template #actions>
<t-date-range-picker <t-date-range-picker
class="card-date-picker-container" class="card-date-picker-container"
@ -43,7 +43,7 @@
</t-row> </t-row>
<t-card <t-card
:class="['dashboard-detail-card', 'row-margin']" :class="['dashboard-detail-card', 'row-margin']"
:title="$t('pages.dashboardDetail.satisfaction.title')" :title="t('pages.dashboardDetail.satisfaction.title')"
:bordered="false" :bordered="false"
> >
<template #actions> <template #actions>
@ -55,7 +55,7 @@
style="display: inline-block; margin-right: var(--td-comp-margin-s); width: 248px" style="display: inline-block; margin-right: var(--td-comp-margin-s); width: 248px"
@change="onSatisfyChange" @change="onSatisfyChange"
/> />
<t-button class="card-date-button"> {{ $t('pages.dashboardDetail.satisfaction.export') }} </t-button> <t-button class="card-date-button"> {{ t('pages.dashboardDetail.satisfaction.export') }} </t-button>
</template> </template>
<div id="scatterContainer" style="width: 100%; height: 434px" /> <div id="scatterContainer" style="width: 100%; height: 434px" />
</t-card> </t-card>
@ -78,6 +78,7 @@ import { computed, nextTick, onDeactivated, onMounted, watch } from 'vue';
import ProductCard from '@/components/product-card/index.vue'; import ProductCard from '@/components/product-card/index.vue';
import Trend from '@/components/trend/index.vue'; import Trend from '@/components/trend/index.vue';
import { t } from '@/locales';
import { useSettingStore } from '@/store'; import { useSettingStore } from '@/store';
import { changeChartsTheme } from '@/utils/color'; import { changeChartsTheme } from '@/utils/color';
import { LAST_7_DAYS } from '@/utils/date'; import { LAST_7_DAYS } from '@/utils/date';

30
src/pages/detail/advanced/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="detail-advanced"> <div class="detail-advanced">
<t-card :bordered="false"> <t-card :bordered="false">
<t-descriptions :title="$t('pages.detailCard.baseInfo.title')"> <t-descriptions :title="t('pages.detailCard.baseInfo.title')">
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name"> <t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
<span <span
:class="{ :class="{
@ -17,32 +17,32 @@
</t-card> </t-card>
<!-- 发票进度 --> <!-- 发票进度 -->
<t-card :title="$t('pages.detailCard.invoice.title')" class="container-base-margin-top" :bordered="false"> <t-card :title="t('pages.detailCard.invoice.title')" class="container-base-margin-top" :bordered="false">
<t-row justify="space-between"> <t-row justify="space-between">
<t-steps :current="updateCurrent"> <t-steps :current="updateCurrent">
<t-step-item <t-step-item
:title="$t('pages.detailCard.invoice.step1.title')" :title="t('pages.detailCard.invoice.step1.title')"
:content="$t('pages.detailCard.invoice.step1.content')" :content="t('pages.detailCard.invoice.step1.content')"
/> />
<t-step-item <t-step-item
:title="$t('pages.detailCard.invoice.step2.title')" :title="t('pages.detailCard.invoice.step2.title')"
:content="$t('pages.detailCard.invoice.step2.content')" :content="t('pages.detailCard.invoice.step2.content')"
/> />
<t-step-item <t-step-item
:title="$t('pages.detailCard.invoice.step3.title')" :title="t('pages.detailCard.invoice.step3.title')"
:content="$t('pages.detailCard.invoice.step3.content')" :content="t('pages.detailCard.invoice.step3.content')"
/> />
<t-step-item :title="$t('pages.detailCard.invoice.step4.title')" /> <t-step-item :title="t('pages.detailCard.invoice.step4.title')" />
</t-steps> </t-steps>
</t-row> </t-row>
</t-card> </t-card>
<!-- 产品目录 --> <!-- 产品目录 -->
<t-card :title="$t('pages.detailCard.product.title')" class="container-base-margin-top" :bordered="false"> <t-card :title="t('pages.detailCard.product.title')" class="container-base-margin-top" :bordered="false">
<template #actions> <template #actions>
<t-radio-group default-value="dateVal"> <t-radio-group default-value="dateVal">
<t-radio-button value="dateVal"> {{ $t('pages.detailCard.product.quarter') }} </t-radio-button> <t-radio-button value="dateVal"> {{ t('pages.detailCard.product.quarter') }} </t-radio-button>
<t-radio-button value="monthVal"> {{ $t('pages.detailCard.product.month') }} </t-radio-button> <t-radio-button value="monthVal"> {{ t('pages.detailCard.product.month') }} </t-radio-button>
</t-radio-group> </t-radio-group>
</template> </template>
<t-row :gutter="16" class="product-block-container"> <t-row :gutter="16" class="product-block-container">
@ -50,7 +50,7 @@
<div class="product-add"> <div class="product-add">
<div class="product-sub"> <div class="product-sub">
<t-icon name="add" class="product-sub-icon" /> <t-icon name="add" class="product-sub-icon" />
<span>{{ $t('pages.detailCard.product.add') }}</span> <span>{{ t('pages.detailCard.product.add') }}</span>
</div> </div>
</div> </div>
</t-col> </t-col>
@ -61,7 +61,7 @@
</t-card> </t-card>
<!-- 产品采购明细 --> <!-- 产品采购明细 -->
<t-card :title="$t('pages.detailCard.detail.title')" class="container-base-margin-top" :bordered="false"> <t-card :title="t('pages.detailCard.detail.title')" class="container-base-margin-top" :bordered="false">
<t-table <t-table
:columns="columns" :columns="columns"
:data="data" :data="data"
@ -109,7 +109,7 @@
</t-table> </t-table>
</t-card> </t-card>
<t-dialog v-model:visible="visible" :header="$t('pages.detailCard.baseInfo.title')" @confirm="onConfirm"> <t-dialog v-model:visible="visible" :header="t('pages.detailCard.baseInfo.title')" @confirm="onConfirm">
<template #body> <template #body>
<div class="dialog-info-block"> <div class="dialog-info-block">
<t-descriptions :column="1"> <t-descriptions :column="1">

16
src/pages/detail/base/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="detail-base"> <div class="detail-base">
<t-card :bordered="false"> <t-card :bordered="false">
<t-descriptions :title="$t('pages.detailBase.baseInfo.title')"> <t-descriptions :title="t('pages.detailBase.baseInfo.title')">
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name"> <t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
<span <span
:class="{ :class="{
@ -16,19 +16,19 @@
</t-descriptions> </t-descriptions>
</t-card> </t-card>
<t-card :title="$t('pages.detailBase.changelog.title')" class="container-base-margin-top" :bordered="false"> <t-card :title="t('pages.detailBase.changelog.title')" class="container-base-margin-top" :bordered="false">
<t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1"> <t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1">
<t-step-item <t-step-item
:title="$t('pages.detailBase.changelog.step1.title')" :title="t('pages.detailBase.changelog.step1.title')"
:content="$t('pages.detailBase.changelog.step1.subtitle')" :content="t('pages.detailBase.changelog.step1.subtitle')"
/> />
<t-step-item <t-step-item
:title="$t('pages.detailBase.changelog.step2.title')" :title="t('pages.detailBase.changelog.step2.title')"
:content="$t('pages.detailBase.changelog.step2.subtitle')" :content="t('pages.detailBase.changelog.step2.subtitle')"
/> />
<t-step-item <t-step-item
:title="$t('pages.detailBase.changelog.step3.title')" :title="t('pages.detailBase.changelog.step3.title')"
:content="$t('pages.detailBase.changelog.step3.desc')" :content="t('pages.detailBase.changelog.step3.desc')"
/> />
</t-steps> </t-steps>
</t-card> </t-card>

22
src/pages/detail/deploy/index.vue
View File

@ -2,18 +2,18 @@
<div class="detail-deploy"> <div class="detail-deploy">
<t-row :gutter="16"> <t-row :gutter="16">
<t-col :lg="6" :xs="12"> <t-col :lg="6" :xs="12">
<t-card :title="$t('pages.detailDeploy.deployTrend.title')" :bordered="false"> <t-card :title="t('pages.detailDeploy.deployTrend.title')" :bordered="false">
<div class="deploy-panel-left"> <div class="deploy-panel-left">
<div id="monitorContainer" style="width: 100%; height: 265px" /> <div id="monitorContainer" style="width: 100%; height: 265px" />
</div> </div>
</t-card> </t-card>
</t-col> </t-col>
<t-col :lg="6" :xs="12"> <t-col :lg="6" :xs="12">
<t-card :title="$t('pages.detailDeploy.deployTrend.warning')" :bordered="false"> <t-card :title="t('pages.detailDeploy.deployTrend.warning')" :bordered="false">
<template #actions> <template #actions>
<t-radio-group default-value="dateVal" @change="onAlertChange"> <t-radio-group default-value="dateVal" @change="onAlertChange">
<t-radio-button value="dateVal"> {{ $t('pages.detailDeploy.deployTrend.thisWeek') }} </t-radio-button> <t-radio-button value="dateVal"> {{ t('pages.detailDeploy.deployTrend.thisWeek') }} </t-radio-button>
<t-radio-button value="monthVal"> {{ $t('pages.detailDeploy.deployTrend.thisMonth') }} </t-radio-button> <t-radio-button value="monthVal"> {{ t('pages.detailDeploy.deployTrend.thisMonth') }} </t-radio-button>
</t-radio-group> </t-radio-group>
</template> </template>
<div id="dataContainer" style="width: 100%; height: 265px" /> <div id="dataContainer" style="width: 100%; height: 265px" />
@ -22,7 +22,7 @@
</t-row> </t-row>
<!-- 项目列表 --> <!-- 项目列表 -->
<t-card :title="$t('pages.detailDeploy.projectList.title')" class="container-base-margin-top" :bordered="false"> <t-card :title="t('pages.detailDeploy.projectList.title')" class="container-base-margin-top" :bordered="false">
<t-table <t-table
:columns="columns" :columns="columns"
:data="data" :data="data"
@ -41,11 +41,9 @@
</template> </template>
<template #op="slotProps"> <template #op="slotProps">
<t-space> <t-space>
<t-link theme="primary" @click="listClick()">{{ <t-link theme="primary" @click="listClick()">{{ t('pages.detailDeploy.projectList.table.manage') }}</t-link>
$t('pages.detailDeploy.projectList.table.manage')
}}</t-link>
<t-link theme="danger" @click="deleteClickOp(slotProps)">{{ <t-link theme="danger" @click="deleteClickOp(slotProps)">{{
$t('pages.detailDeploy.projectList.table.delete') t('pages.detailDeploy.projectList.table.delete')
}}</t-link> }}</t-link>
</t-space> </t-space>
</template> </template>
@ -55,11 +53,7 @@
</t-table> </t-table>
</t-card> </t-card>
<t-dialog <t-dialog v-model:visible="visible" :header="t('pages.detailDeploy.projectList.dialog.title')" @confirm="onConfirm">
v-model:visible="visible"
:header="$t('pages.detailDeploy.projectList.dialog.title')"
@confirm="onConfirm"
>
<template #body> <template #body>
<div class="dialog-info-block"> <div class="dialog-info-block">
<div class="dialog-info-block"> <div class="dialog-info-block">

2
src/pages/detail/secondary/index.vue
View File

@ -18,7 +18,7 @@
<t-tooltip <t-tooltip
class="set-read-icon" class="set-read-icon"
:overlay-style="{ margin: '6px' }" :overlay-style="{ margin: '6px' }"
:content="item.status ? $t('pages.detailSecondary.setRead') : $t('pages.detailSecondary.setUnread')" :content="item.status ? t('pages.detailSecondary.setRead') : t('pages.detailSecondary.setUnread')"
> >
<span class="msg-action-icon" @click="setReadStatus(item)"> <span class="msg-action-icon" @click="setReadStatus(item)">
<t-icon v-if="!!item.status" name="queue" size="16px" /> <t-icon v-if="!!item.status" name="queue" size="16px" />

48
src/pages/form/base/index.vue
View File

@ -11,18 +11,18 @@
> >
<div class="form-basic-container"> <div class="form-basic-container">
<div class="form-basic-item"> <div class="form-basic-item">
<div class="form-basic-container-title">{{ $t('pages.formBase.title') }}</div> <div class="form-basic-container-title">{{ t('pages.formBase.title') }}</div>
<!-- 表单内容 --> <!-- 表单内容 -->
<!-- 合同名称,合同类型 --> <!-- 合同名称,合同类型 -->
<t-row class="row-gap" :gutter="[32, 24]"> <t-row class="row-gap" :gutter="[32, 24]">
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.contractName')" name="name"> <t-form-item :label="t('pages.formBase.contractName')" name="name">
<t-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" /> <t-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" />
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.contractType')" name="type"> <t-form-item :label="t('pages.formBase.contractType')" name="type">
<t-select v-model="formData.type" :style="{ width: '322px' }" class="demo-select-base" clearable> <t-select v-model="formData.type" :style="{ width: '322px' }" class="demo-select-base" clearable>
<t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label"> <t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }} {{ item.label }}
@ -33,25 +33,25 @@
<!-- 合同收付类型 --> <!-- 合同收付类型 -->
<t-col :span="8"> <t-col :span="8">
<t-form-item :label="$t('pages.formBase.contractPayType')" name="payment"> <t-form-item :label="t('pages.formBase.contractPayType')" name="payment">
<t-radio-group v-model="formData.payment"> <t-radio-group v-model="formData.payment">
<t-radio value="1"> {{ $t('pages.formBase.receive') }} </t-radio> <t-radio value="1"> {{ t('pages.formBase.receive') }} </t-radio>
<t-radio value="2"> {{ $t('pages.formBase.pay') }} </t-radio> <t-radio value="2"> {{ t('pages.formBase.pay') }} </t-radio>
</t-radio-group> </t-radio-group>
<span class="space-item" /> <span class="space-item" />
<div> <div>
<t-input :placeholder="$t('pages.formBase.contractAmountPlaceholder')" :style="{ width: '160px' }" /> <t-input :placeholder="t('pages.formBase.contractAmountPlaceholder')" :style="{ width: '160px' }" />
</div> </div>
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.company')" name="partyA"> <t-form-item :label="t('pages.formBase.company')" name="partyA">
<t-select <t-select
v-model="formData.partyA" v-model="formData.partyA"
:style="{ width: '322px' }" :style="{ width: '322px' }"
class="demo-select-base" class="demo-select-base"
:placeholder="$t('pages.formBase.contractTypePlaceholder')" :placeholder="t('pages.formBase.contractTypePlaceholder')"
clearable clearable
> >
<t-option v-for="(item, index) in PARTY_A_OPTIONS" :key="index" :value="item.value" :label="item.label"> <t-option v-for="(item, index) in PARTY_A_OPTIONS" :key="index" :value="item.value" :label="item.label">
@ -61,11 +61,11 @@
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.employee')" name="partyB"> <t-form-item :label="t('pages.formBase.employee')" name="partyB">
<t-select <t-select
v-model="formData.partyB" v-model="formData.partyB"
:style="{ width: '322px' }" :style="{ width: '322px' }"
:placeholder="$t('pages.formBase.contractTypePlaceholder')" :placeholder="t('pages.formBase.contractTypePlaceholder')"
class="demo-select-base" class="demo-select-base"
clearable clearable
> >
@ -76,7 +76,7 @@
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.contractSignDate')" name="signDate"> <t-form-item :label="t('pages.formBase.contractSignDate')" name="signDate">
<t-date-picker <t-date-picker
v-model="formData.signDate" v-model="formData.signDate"
:style="{ width: '322px' }" :style="{ width: '322px' }"
@ -87,7 +87,7 @@
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.contractEffectiveDate')" name="startDate"> <t-form-item :label="t('pages.formBase.contractEffectiveDate')" name="startDate">
<t-date-picker <t-date-picker
v-model="formData.startDate" v-model="formData.startDate"
:style="{ width: '322px' }" :style="{ width: '322px' }"
@ -98,7 +98,7 @@
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.contractEndDate')" name="endDate"> <t-form-item :label="t('pages.formBase.contractEndDate')" name="endDate">
<t-date-picker <t-date-picker
v-model="formData.endDate" v-model="formData.endDate"
:style="{ width: '322px' }" :style="{ width: '322px' }"
@ -109,30 +109,30 @@
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="6"> <t-col :span="6">
<t-form-item :label="$t('pages.formBase.upload')" name="files"> <t-form-item :label="t('pages.formBase.upload')" name="files">
<t-upload <t-upload
v-model="formData.files" v-model="formData.files"
action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo" action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
:tips="$t('pages.formBase.uploadTips')" :tips="t('pages.formBase.uploadTips')"
:size-limit="{ size: 60, unit: 'MB' }" :size-limit="{ size: 60, unit: 'MB' }"
:format-response="formatResponse" :format-response="formatResponse"
:before-upload="beforeUpload" :before-upload="beforeUpload"
@fail="handleFail" @fail="handleFail"
> >
<t-button class="form-submit-upload-btn" variant="outline"> <t-button class="form-submit-upload-btn" variant="outline">
{{ $t('pages.formBase.uploadFile') }} {{ t('pages.formBase.uploadFile') }}
</t-button> </t-button>
</t-upload> </t-upload>
</t-form-item> </t-form-item>
</t-col> </t-col>
</t-row> </t-row>
<div class="form-basic-container-title form-title-gap">{{ $t('pages.formBase.otherInfo') }}</div> <div class="form-basic-container-title form-title-gap">{{ t('pages.formBase.otherInfo') }}</div>
<t-form-item :label="$t('pages.formBase.remark')" name="comment"> <t-form-item :label="t('pages.formBase.remark')" name="comment">
<t-textarea v-model="formData.comment" :height="124" :placeholder="$t('pages.formBase.remarkPlaceholder')" /> <t-textarea v-model="formData.comment" :height="124" :placeholder="t('pages.formBase.remarkPlaceholder')" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formBase.notaryPublic')"> <t-form-item :label="t('pages.formBase.notaryPublic')">
<t-avatar-group> <t-avatar-group>
<t-avatar>D</t-avatar> <t-avatar>D</t-avatar>
<t-avatar>S</t-avatar> <t-avatar>S</t-avatar>
@ -146,10 +146,10 @@
<div class="form-submit-sub"> <div class="form-submit-sub">
<div class="form-submit-left"> <div class="form-submit-left">
<t-button theme="primary" class="form-submit-confirm" type="submit"> <t-button theme="primary" class="form-submit-confirm" type="submit">
{{ $t('pages.formBase.confirm') }} {{ t('pages.formBase.confirm') }}
</t-button> </t-button>
<t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> <t-button type="reset" class="form-submit-cancel" theme="default" variant="base">
{{ $t('pages.formBase.cancel') }} {{ t('pages.formBase.cancel') }}
</t-button> </t-button>
</div> </div>
</div> </div>
@ -168,6 +168,8 @@ import type { SubmitContext, UploadFailContext, UploadFile } from 'tdesign-vue-n
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
import { ref } from 'vue'; import { ref } from 'vue';
import { t } from '@/locales';
import { FORM_RULES, INITIAL_DATA, PARTY_A_OPTIONS, PARTY_B_OPTIONS, TYPE_OPTIONS } from './constants'; import { FORM_RULES, INITIAL_DATA, PARTY_A_OPTIONS, PARTY_B_OPTIONS, TYPE_OPTIONS } from './constants';
const formData = ref({ ...INITIAL_DATA }); const formData = ref({ ...INITIAL_DATA });

78
src/pages/form/step/index.vue
View File

@ -4,22 +4,22 @@
<!-- 简单步骤条 --> <!-- 简单步骤条 -->
<t-card :bordered="false"> <t-card :bordered="false">
<t-steps class="step-container" :current="1" status="process"> <t-steps class="step-container" :current="1" status="process">
<t-step-item :title="$t('pages.formStep.step1.title')" :content="$t('pages.formStep.step1.subtitle')" /> <t-step-item :title="t('pages.formStep.step1.title')" :content="t('pages.formStep.step1.subtitle')" />
<t-step-item :title="$t('pages.formStep.step2.title')" :content="$t('pages.formStep.step2.subtitle')" /> <t-step-item :title="t('pages.formStep.step2.title')" :content="t('pages.formStep.step2.subtitle')" />
<t-step-item :title="$t('pages.formStep.step3.title')" :content="$t('pages.formStep.step3.subtitle')" /> <t-step-item :title="t('pages.formStep.step3.title')" :content="t('pages.formStep.step3.subtitle')" />
<t-step-item :title="$t('pages.formStep.step4.title')" :content="$t('pages.formStep.step4.subtitle')" /> <t-step-item :title="t('pages.formStep.step4.title')" :content="t('pages.formStep.step4.subtitle')" />
</t-steps> </t-steps>
</t-card> </t-card>
<!-- 分步表单1 --> <!-- 分步表单1 -->
<div v-show="activeForm === 0" class="rule-tips"> <div v-show="activeForm === 0" class="rule-tips">
<t-alert theme="info" :title="$t('pages.formStep.step1.rules')" :close="true"> <t-alert theme="info" :title="t('pages.formStep.step1.rules')" :close="true">
<template #message> <template #message>
<p> <p>
{{ $t('pages.formStep.step1.rule1') }} {{ t('pages.formStep.step1.rule1') }}
</p> </p>
<p>{{ $t('pages.formStep.step1.rule2') }}</p> <p>{{ t('pages.formStep.step1.rule2') }}</p>
<p>{{ $t('pages.formStep.step1.rule3') }}</p> <p>{{ t('pages.formStep.step1.rule3') }}</p>
</template> </template>
</t-alert> </t-alert>
</div> </div>
@ -31,23 +31,23 @@
label-align="right" label-align="right"
@submit="(result: SubmitContext) => onSubmit(result, 1)" @submit="(result: SubmitContext) => onSubmit(result, 1)"
> >
<t-form-item :label="$t('pages.formStep.step1.contractName')" name="name"> <t-form-item :label="t('pages.formStep.step1.contractName')" name="name">
<t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable> <t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable>
<t-option v-for="(item, index) in NAME_OPTIONS" :key="index" :value="item.value" :label="item.label"> <t-option v-for="(item, index) in NAME_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }} {{ item.label }}
</t-option> </t-option>
</t-select> </t-select>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step1.invoiceType')" name="type"> <t-form-item :label="t('pages.formStep.step1.invoiceType')" name="type">
<t-select v-model="formData1.type" :style="{ width: '480px' }" class="demo-select-base" clearable> <t-select v-model="formData1.type" :style="{ width: '480px' }" class="demo-select-base" clearable>
<t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label"> <t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }} {{ item.label }}
</t-option> </t-option>
</t-select> </t-select>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step1.amount')"> ¥ {{ amount }} </t-form-item> <t-form-item :label="t('pages.formStep.step1.amount')"> ¥ {{ amount }} </t-form-item>
<t-form-item> <t-form-item>
<t-button theme="primary" type="submit"> {{ $t('pages.formStep.step1.submit') }} </t-button> <t-button theme="primary" type="submit"> {{ t('pages.formStep.step1.submit') }} </t-button>
</t-form-item> </t-form-item>
</t-form> </t-form>
@ -61,58 +61,58 @@
@reset="onReset(0)" @reset="onReset(0)"
@submit="(result: SubmitContext) => onSubmit(result, 2)" @submit="(result: SubmitContext) => onSubmit(result, 2)"
> >
<t-form-item :label="$t('pages.formStep.step2.invoiceTitle')" name="title"> <t-form-item :label="t('pages.formStep.step2.invoiceTitle')" name="title">
<t-input <t-input
v-model="formData2.title" v-model="formData2.title"
:style="{ width: '480px' }" :style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.invoiceTitlePlaceholder')" :placeholder="t('pages.formStep.step2.invoiceTitlePlaceholder')"
/> />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.taxNum')" name="taxNum"> <t-form-item :label="t('pages.formStep.step2.taxNum')" name="taxNum">
<t-input <t-input
v-model="formData2.taxNum" v-model="formData2.taxNum"
:style="{ width: '480px' }" :style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.taxNumPlaceholder')" :placeholder="t('pages.formStep.step2.taxNumPlaceholder')"
/> />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.address')" name="address"> <t-form-item :label="t('pages.formStep.step2.address')" name="address">
<t-input <t-input
v-model="formData2.address" v-model="formData2.address"
:style="{ width: '480px' }" :style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.addressPlaceholder')" :placeholder="t('pages.formStep.step2.addressPlaceholder')"
/> />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.bank')" name="bank"> <t-form-item :label="t('pages.formStep.step2.bank')" name="bank">
<t-input <t-input
v-model="formData2.bank" v-model="formData2.bank"
:style="{ width: '480px' }" :style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.bankPlaceholder')" :placeholder="t('pages.formStep.step2.bankPlaceholder')"
/> />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.bankAccount')" name="bankAccount"> <t-form-item :label="t('pages.formStep.step2.bankAccount')" name="bankAccount">
<t-input <t-input
v-model="formData2.bankAccount" v-model="formData2.bankAccount"
:style="{ width: '480px' }" :style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.bankAccountPlaceholder')" :placeholder="t('pages.formStep.step2.bankAccountPlaceholder')"
/> />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.email')" name="email"> <t-form-item :label="t('pages.formStep.step2.email')" name="email">
<t-input <t-input
v-model="formData2.email" v-model="formData2.email"
:style="{ width: '480px' }" :style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.emailPlaceholder')" :placeholder="t('pages.formStep.step2.emailPlaceholder')"
/> />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step2.tel')" name="tel"> <t-form-item :label="t('pages.formStep.step2.tel')" name="tel">
<t-input <t-input
v-model="formData2.tel" v-model="formData2.tel"
:style="{ width: '480px' }" :style="{ width: '480px' }"
:placeholder="$t('pages.formStep.step2.telPlaceholder')" :placeholder="t('pages.formStep.step2.telPlaceholder')"
/> />
</t-form-item> </t-form-item>
<t-form-item> <t-form-item>
<t-button type="reset" theme="default" variant="base"> {{ $t('pages.formStep.preStep') }} </t-button> <t-button type="reset" theme="default" variant="base"> {{ t('pages.formStep.preStep') }} </t-button>
<t-button theme="primary" type="submit"> {{ $t('pages.formStep.nextStep') }} </t-button> <t-button theme="primary" type="submit"> {{ t('pages.formStep.nextStep') }} </t-button>
</t-form-item> </t-form-item>
</t-form> </t-form>
@ -126,25 +126,25 @@
@reset="onReset(1)" @reset="onReset(1)"
@submit="(result: SubmitContext) => onSubmit(result, 6)" @submit="(result: SubmitContext) => onSubmit(result, 6)"
> >
<t-form-item :label="$t('pages.formStep.step3.consignee')" name="consignee"> <t-form-item :label="t('pages.formStep.step3.consignee')" name="consignee">
<t-input v-model="formData3.consignee" :style="{ width: '480px' }" /> <t-input v-model="formData3.consignee" :style="{ width: '480px' }" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step3.mobileNum')" name="mobileNum"> <t-form-item :label="t('pages.formStep.step3.mobileNum')" name="mobileNum">
<t-input v-model="formData3.mobileNum" :style="{ width: '480px' }" /> <t-input v-model="formData3.mobileNum" :style="{ width: '480px' }" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step3.deliveryAddress')" name="deliveryAddress"> <t-form-item :label="t('pages.formStep.step3.deliveryAddress')" name="deliveryAddress">
<t-select v-model="formData3.deliveryAddress" :style="{ width: '480px' }" class="demo-select-base" clearable> <t-select v-model="formData3.deliveryAddress" :style="{ width: '480px' }" class="demo-select-base" clearable>
<t-option v-for="(item, index) in ADDRESS_OPTIONS" :key="index" :value="item.value" :label="item.label"> <t-option v-for="(item, index) in ADDRESS_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }} {{ item.label }}
</t-option> </t-option>
</t-select> </t-select>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.formStep.step3.fullAddress')" name="fullAddress"> <t-form-item :label="t('pages.formStep.step3.fullAddress')" name="fullAddress">
<t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" /> <t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" />
</t-form-item> </t-form-item>
<t-form-item> <t-form-item>
<t-button type="reset" theme="default" variant="base"> {{ $t('pages.formStep.preStep') }} </t-button> <t-button type="reset" theme="default" variant="base"> {{ t('pages.formStep.preStep') }} </t-button>
<t-button theme="primary" type="submit"> {{ $t('pages.formStep.nextStep') }} </t-button> <t-button theme="primary" type="submit"> {{ t('pages.formStep.nextStep') }} </t-button>
</t-form-item> </t-form-item>
</t-form> </t-form>
@ -152,12 +152,12 @@
<div v-show="activeForm === 6" class="step-form-4"> <div v-show="activeForm === 6" class="step-form-4">
<t-space direction="vertical" style="align-items: center"> <t-space direction="vertical" style="align-items: center">
<t-icon name="check-circle-filled" style="color: green" size="52px" /> <t-icon name="check-circle-filled" style="color: green" size="52px" />
<p class="text">{{ $t('pages.formStep.step4.finishTitle') }}</p> <p class="text">{{ t('pages.formStep.step4.finishTitle') }}</p>
<p class="tips">{{ $t('pages.formStep.step4.finishTips') }}</p> <p class="tips">{{ t('pages.formStep.step4.finishTips') }}</p>
<div class="button-group"> <div class="button-group">
<t-button theme="primary" @click="onReset(0)"> {{ $t('pages.formStep.step4.reapply') }} </t-button> <t-button theme="primary" @click="onReset(0)"> {{ t('pages.formStep.step4.reapply') }} </t-button>
<t-button variant="base" theme="default" @click="complete"> <t-button variant="base" theme="default" @click="complete">
{{ $t('pages.formStep.step4.check') }} {{ t('pages.formStep.step4.check') }}
</t-button> </t-button>
</div> </div>
</t-space> </t-space>
@ -177,6 +177,8 @@ import { SubmitContext } from 'tdesign-vue-next';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { t } from '@/locales';
import { import {
ADDRESS_OPTIONS, ADDRESS_OPTIONS,
FORM_RULES, FORM_RULES,

32
src/pages/list/base/index.vue
View File

@ -3,16 +3,16 @@
<t-card class="list-card-container" :bordered="false"> <t-card class="list-card-container" :bordered="false">
<t-row justify="space-between"> <t-row justify="space-between">
<div class="left-operation-container"> <div class="left-operation-container">
<t-button @click="handleSetupContract"> {{ $t('pages.listBase.create') }} </t-button> <t-button @click="handleSetupContract"> {{ t('pages.listBase.create') }} </t-button>
<t-button variant="base" theme="default" :disabled="!selectedRowKeys.length"> <t-button variant="base" theme="default" :disabled="!selectedRowKeys.length">
{{ $t('pages.listBase.export') }}</t-button {{ t('pages.listBase.export') }}</t-button
> >
<p v-if="!!selectedRowKeys.length" class="selected-count"> <p v-if="!!selectedRowKeys.length" class="selected-count">
{{ $t('pages.listBase.select') }} {{ selectedRowKeys.length }} {{ $t('pages.listBase.items') }} {{ t('pages.listBase.select') }} {{ selectedRowKeys.length }} {{ t('pages.listBase.items') }}
</p> </p>
</div> </div>
<div class="search-input"> <div class="search-input">
<t-input v-model="searchValue" :placeholder="$t('pages.listBase.placeholder')" clearable> <t-input v-model="searchValue" :placeholder="t('pages.listBase.placeholder')" clearable>
<template #suffix-icon> <template #suffix-icon>
<search-icon size="16px" /> <search-icon size="16px" />
</template> </template>
@ -35,41 +35,41 @@
> >
<template #status="{ row }"> <template #status="{ row }">
<t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light"> <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">
{{ $t('pages.listBase.contractStatusEnum.fail') }}</t-tag {{ t('pages.listBase.contractStatusEnum.fail') }}</t-tag
> >
<t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light"> <t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light">
{{ $t('pages.listBase.contractStatusEnum.audit') }} {{ t('pages.listBase.contractStatusEnum.audit') }}
</t-tag> </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light"> <t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light">
{{ $t('pages.listBase.contractStatusEnum.pending') }} {{ t('pages.listBase.contractStatusEnum.pending') }}
</t-tag> </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light"> <t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light">
{{ $t('pages.listBase.contractStatusEnum.executing') }} {{ t('pages.listBase.contractStatusEnum.executing') }}
</t-tag> </t-tag>
<t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light"> <t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light">
{{ $t('pages.listBase.contractStatusEnum.finish') }} {{ t('pages.listBase.contractStatusEnum.finish') }}
</t-tag> </t-tag>
</template> </template>
<template #contractType="{ row }"> <template #contractType="{ row }">
<p v-if="row.contractType === CONTRACT_TYPES.MAIN">{{ $t('pages.listBase.contractStatusEnum.fail') }}</p> <p v-if="row.contractType === CONTRACT_TYPES.MAIN">{{ t('pages.listBase.contractStatusEnum.fail') }}</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUB">{{ $t('pages.listBase.contractStatusEnum.audit') }}</p> <p v-if="row.contractType === CONTRACT_TYPES.SUB">{{ t('pages.listBase.contractStatusEnum.audit') }}</p>
<p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT"> <p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">
{{ $t('pages.listBase.contractStatusEnum.pending') }} {{ t('pages.listBase.contractStatusEnum.pending') }}
</p> </p>
</template> </template>
<template #paymentType="{ row }"> <template #paymentType="{ row }">
<div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col"> <div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
{{ $t('pages.listBase.pay') }}<trend class="dashboard-item-trend" type="up" /> {{ t('pages.listBase.pay') }}<trend class="dashboard-item-trend" type="up" />
</div> </div>
<div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECEIPT" class="payment-col"> <div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECEIPT" class="payment-col">
{{ $t('pages.listBase.receive') }}<trend class="dashboard-item-trend" type="down" /> {{ t('pages.listBase.receive') }}<trend class="dashboard-item-trend" type="down" />
</div> </div>
</template> </template>
<template #op="slotProps"> <template #op="slotProps">
<t-space> <t-space>
<t-link theme="primary" @click="handleClickDetail()"> {{ $t('pages.listBase.detail') }}</t-link> <t-link theme="primary" @click="handleClickDetail()"> {{ t('pages.listBase.detail') }}</t-link>
<t-link theme="danger" @click="handleClickDelete(slotProps)"> {{ $t('pages.listBase.delete') }}</t-link> <t-link theme="danger" @click="handleClickDelete(slotProps)"> {{ t('pages.listBase.delete') }}</t-link>
</t-space> </t-space>
</template> </template>
</t-table> </t-table>

18
src/pages/list/card/components/DialogForm.vue
View File

@ -1,28 +1,28 @@
<template> <template>
<t-dialog v-model:visible="formVisible" :header="$t('pages.listCard.create')" :width="680" :footer="false"> <t-dialog v-model:visible="formVisible" :header="t('pages.listCard.create')" :width="680" :footer="false">
<template #body> <template #body>
<!-- 表单内容 --> <!-- 表单内容 -->
<t-form ref="form" :data="formData" :rules="rules" :label-width="100" @submit="onSubmit"> <t-form ref="form" :data="formData" :rules="rules" :label-width="100" @submit="onSubmit">
<t-form-item :label="$t('pages.listCard.productName')" name="name"> <t-form-item :label="t('pages.listCard.productName')" name="name">
<t-input v-model="formData.name" :style="{ width: '480px' }" /> <t-input v-model="formData.name" :style="{ width: '480px' }" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.listCard.productStatus')" name="status"> <t-form-item :label="t('pages.listCard.productStatus')" name="status">
<t-radio-group v-model="formData.status"> <t-radio-group v-model="formData.status">
<t-radio value="0">{{ $t('pages.listCard.productStatusEnum.off') }}</t-radio> <t-radio value="0">{{ t('pages.listCard.productStatusEnum.off') }}</t-radio>
<t-radio value="1">{{ $t('pages.listCard.productStatusEnum.on') }}</t-radio> <t-radio value="1">{{ t('pages.listCard.productStatusEnum.on') }}</t-radio>
</t-radio-group> </t-radio-group>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.listCard.productDescription')" name="description"> <t-form-item :label="t('pages.listCard.productDescription')" name="description">
<t-input v-model="formData.description" :style="{ width: '480px' }" /> <t-input v-model="formData.description" :style="{ width: '480px' }" />
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.listCard.productType')" name="type"> <t-form-item :label="t('pages.listCard.productType')" name="type">
<t-select v-model="formData.type" clearable :style="{ width: '480px' }"> <t-select v-model="formData.type" clearable :style="{ width: '480px' }">
<t-option v-for="(item, index) in SELECT_OPTIONS" :key="index" :value="item.value" :label="item.label"> <t-option v-for="(item, index) in SELECT_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }} {{ item.label }}
</t-option> </t-option>
</t-select> </t-select>
</t-form-item> </t-form-item>
<t-form-item :label="$t('pages.listCard.productRemark')" name="mark"> <t-form-item :label="t('pages.listCard.productRemark')" name="mark">
<t-textarea v-model="textareaValue" :style="{ width: '480px' }" name="description" /> <t-textarea v-model="textareaValue" :style="{ width: '480px' }" name="description" />
</t-form-item> </t-form-item>
<t-form-item style="float: right"> <t-form-item style="float: right">
@ -39,6 +39,8 @@ import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { t } from '@/locales';
export interface FormData { export interface FormData {
name: string; name: string;
status: string; status: string;

5
src/pages/list/card/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<div class="list-card-operation"> <div class="list-card-operation">
<t-button @click="formDialogVisible = true"> {{ $t('pages.listCard.create') }} </t-button> <t-button @click="formDialogVisible = true"> {{ t('pages.listCard.create') }} </t-button>
<div class="search-input"> <div class="search-input">
<t-input v-model="searchValue" :placeholder="$t('pages.listCard.placeholder')" clearable> <t-input v-model="searchValue" :placeholder="t('pages.listCard.placeholder')" clearable>
<template #suffix-icon> <template #suffix-icon>
<search-icon v-if="searchValue === ''" size="var(--td-comp-size-xxxs)" /> <search-icon v-if="searchValue === ''" size="var(--td-comp-size-xxxs)" />
</template> </template>
@ -75,6 +75,7 @@ import { computed, onMounted, ref } from 'vue';
import { getCardList } from '@/api/list'; import { getCardList } from '@/api/list';
import type { CardProductType } from '@/components/product-card/index.vue'; import type { CardProductType } from '@/components/product-card/index.vue';
import ProductCard from '@/components/product-card/index.vue'; import ProductCard from '@/components/product-card/index.vue';
import { t } from '@/locales';
import type { FormData } from './components/DialogForm.vue'; import type { FormData } from './components/DialogForm.vue';
import DialogForm from './components/DialogForm.vue'; import DialogForm from './components/DialogForm.vue';

3
src/pages/list/tree/index.vue
View File

@ -2,7 +2,7 @@
<div class="table-tree-container"> <div class="table-tree-container">
<div class="list-tree-wrapper"> <div class="list-tree-wrapper">
<div class="list-tree-operator"> <div class="list-tree-operator">
<t-input v-model="filterText" :placeholder="$t('pages.listTree.placeholder')" @change="onInput"> <t-input v-model="filterText" :placeholder="t('pages.listTree.placeholder')" @change="onInput">
<template #suffix-icon> <template #suffix-icon>
<search-icon size="var(--td-comp-size-xxxs)" /> <search-icon size="var(--td-comp-size-xxxs)" />
</template> </template>
@ -28,6 +28,7 @@ import type { TreeNodeModel } from 'tdesign-vue-next';
import { ref } from 'vue'; import { ref } from 'vue';
import CommonTable from '@/components/common-table/index.vue'; import CommonTable from '@/components/common-table/index.vue';
import { t } from '@/locales';
import { TREE_DATA } from './constants'; import { TREE_DATA } from './constants';

28
src/pages/login/components/Login.vue
View File

@ -9,7 +9,7 @@
> >
<template v-if="type == 'password'"> <template v-if="type == 'password'">
<t-form-item name="account"> <t-form-item name="account">
<t-input v-model="formData.account" size="large" :placeholder="`${$t('pages.login.input.account')}：admin`"> <t-input v-model="formData.account" size="large" :placeholder="`${t('pages.login.input.account')}：admin`">
<template #prefix-icon> <template #prefix-icon>
<t-icon name="user" /> <t-icon name="user" />
</template> </template>
@ -22,7 +22,7 @@
size="large" size="large"
:type="showPsw ? 'text' : 'password'" :type="showPsw ? 'text' : 'password'"
clearable clearable
:placeholder="`${$t('pages.login.input.password')}：admin`" :placeholder="`${t('pages.login.input.password')}：admin`"
> >
<template #prefix-icon> <template #prefix-icon>
<t-icon name="lock-on" /> <t-icon name="lock-on" />
@ -34,16 +34,16 @@
</t-form-item> </t-form-item>
<div class="check-container remember-pwd"> <div class="check-container remember-pwd">
<t-checkbox>{{ $t('pages.login.remember') }}</t-checkbox> <t-checkbox>{{ t('pages.login.remember') }}</t-checkbox>
<span class="tip">{{ $t('pages.login.forget') }}</span> <span class="tip">{{ t('pages.login.forget') }}</span>
</div> </div>
</template> </template>
<!-- 扫码登录 --> <!-- 扫码登录 -->
<template v-else-if="type == 'qrcode'"> <template v-else-if="type == 'qrcode'">
<div class="tip-container"> <div class="tip-container">
<span class="tip">{{ $t('pages.login.wechatLogin') }}</span> <span class="tip">{{ t('pages.login.wechatLogin') }}</span>
<span class="refresh">{{ $t('pages.login.refresh') }} <t-icon name="refresh" /> </span> <span class="refresh">{{ t('pages.login.refresh') }} <t-icon name="refresh" /> </span>
</div> </div>
<qrcode-vue value="" :size="160" level="H" /> <qrcode-vue value="" :size="160" level="H" />
</template> </template>
@ -51,7 +51,7 @@
<!-- 手机号登录 --> <!-- 手机号登录 -->
<template v-else> <template v-else>
<t-form-item name="phone"> <t-form-item name="phone">
<t-input v-model="formData.phone" size="large" :placeholder="$t('pages.login.input.phone')"> <t-input v-model="formData.phone" size="large" :placeholder="t('pages.login.input.phone')">
<template #prefix-icon> <template #prefix-icon>
<t-icon name="mobile" /> <t-icon name="mobile" />
</template> </template>
@ -59,25 +59,23 @@
</t-form-item> </t-form-item>
<t-form-item class="verification-code" name="verifyCode"> <t-form-item class="verification-code" name="verifyCode">
<t-input v-model="formData.verifyCode" size="large" :placeholder="$t('pages.login.input.verification')" /> <t-input v-model="formData.verifyCode" size="large" :placeholder="t('pages.login.input.verification')" />
<t-button size="large" variant="outline" :disabled="countDown > 0" @click="sendCode"> <t-button size="large" variant="outline" :disabled="countDown > 0" @click="sendCode">
{{ countDown == 0 ? $t('pages.login.sendVerification') : `${countDown}秒后可重发` }} {{ countDown == 0 ? t('pages.login.sendVerification') : `${countDown}秒后可重发` }}
</t-button> </t-button>
</t-form-item> </t-form-item>
</template> </template>
<t-form-item v-if="type !== 'qrcode'" class="btn-container"> <t-form-item v-if="type !== 'qrcode'" class="btn-container">
<t-button block size="large" type="submit"> {{ $t('pages.login.signIn') }} </t-button> <t-button block size="large" type="submit"> {{ t('pages.login.signIn') }} </t-button>
</t-form-item> </t-form-item>
<div class="switch-container"> <div class="switch-container">
<span v-if="type !== 'password'" class="tip" @click="switchType('password')">{{ <span v-if="type !== 'password'" class="tip" @click="switchType('password')">{{
$t('pages.login.accountLogin') t('pages.login.accountLogin')
}}</span> }}</span>
<span v-if="type !== 'qrcode'" class="tip" @click="switchType('qrcode')">{{ <span v-if="type !== 'qrcode'" class="tip" @click="switchType('qrcode')">{{ t('pages.login.wechatLogin') }}</span>
$t('pages.login.wechatLogin') <span v-if="type !== 'phone'" class="tip" @click="switchType('phone')">{{ t('pages.login.phoneLogin') }}</span>
}}</span>
<span v-if="type !== 'phone'" class="tip" @click="switchType('phone')">{{ $t('pages.login.phoneLogin') }}</span>
</div> </div>
</t-form> </t-form>
</template> </template>

7
src/pages/login/index.vue
View File

@ -4,12 +4,12 @@
<div class="login-container"> <div class="login-container">
<div class="title-container"> <div class="title-container">
<h1 class="title margin-no">{{ $t('pages.login.loginTitle') }}</h1> <h1 class="title margin-no">{{ t('pages.login.loginTitle') }}</h1>
<h1 class="title">TDesign Starter</h1> <h1 class="title">TDesign Starter</h1>
<div class="sub-title"> <div class="sub-title">
<p class="tip">{{ type == 'register' ? $t('pages.login.existAccount') : $t('pages.login.noAccount') }}</p> <p class="tip">{{ type == 'register' ? t('pages.login.existAccount') : t('pages.login.noAccount') }}</p>
<p class="tip" @click="switchType(type == 'register' ? 'login' : 'register')"> <p class="tip" @click="switchType(type == 'register' ? 'login' : 'register')">
{{ type == 'register' ? $t('pages.login.signIn') : $t('pages.login.createAccount') }} {{ type == 'register' ? t('pages.login.signIn') : t('pages.login.createAccount') }}
</p> </p>
</div> </div>
</div> </div>
@ -31,6 +31,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
import TdesignSetting from '@/layouts/setting.vue'; import TdesignSetting from '@/layouts/setting.vue';
import { t } from '@/locales';
import LoginHeader from './components/Header.vue'; import LoginHeader from './components/Header.vue';
import Login from './components/Login.vue'; import Login from './components/Login.vue';

5
src/pages/result/403/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<result title="403 Forbidden" :tip="$t('pages.result.403.tips')"> <result title="403 Forbidden" :tip="t('pages.result.403.tips')">
<t-button @click="() => $router.push('/')">{{ $t('pages.result.403.back') }}</t-button> <t-button @click="() => $router.push('/')">{{ t('pages.result.403.back') }}</t-button>
</result> </result>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -10,4 +10,5 @@ export default {
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
import { t } from '@/locales';
</script> </script>

5
src/pages/result/404/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<result title="404 Not Found" :tip="$t('pages.result.404.subtitle')" type="404"> <result title="404 Not Found" :tip="t('pages.result.404.subtitle')" type="404">
<t-button @click="() => $router.push('/')">{{ $t('pages.result.404.back') }}</t-button> <t-button @click="() => $router.push('/')">{{ t('pages.result.404.back') }}</t-button>
</result> </result>
</template> </template>
@ -12,4 +12,5 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
import { t } from '@/locales';
</script> </script>

5
src/pages/result/500/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<result title="500 Internal Server Error" type="500" :tip="$t('pages.result.500.subtitle')"> <result title="500 Internal Server Error" type="500" :tip="t('pages.result.500.subtitle')">
<t-button @click="() => $router.push('/')">{{ $t('pages.result.500.back') }}</t-button> <t-button @click="() => $router.push('/')">{{ t('pages.result.500.back') }}</t-button>
</result> </result>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -10,4 +10,5 @@ export default {
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
import { t } from '@/locales';
</script> </script>

9
src/pages/result/browser-incompatible/index.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<result <result
:title="$t('pages.result.browserIncompatible.title')" :title="t('pages.result.browserIncompatible.title')"
type="ie" type="ie"
:tip="$t('pages.result.browserIncompatible.subtitle')" :tip="t('pages.result.browserIncompatible.subtitle')"
> >
<div class="result-slot-container"> <div class="result-slot-container">
<t-button class="result-button" @click="() => $router.push('/')">{{ <t-button class="result-button" @click="() => $router.push('/')">{{
$t('pages.result.browserIncompatible.back') t('pages.result.browserIncompatible.back')
}}</t-button> }}</t-button>
<div class="recommend-container"> <div class="recommend-container">
<div>{{ $t('pages.result.browserIncompatible.recommend') }}</div> <div>{{ t('pages.result.browserIncompatible.recommend') }}</div>
<div class="recommend-browser"> <div class="recommend-browser">
<div> <div>
<thumbnail class="browser-icon" url="https://tdesign.gtimg.com/starter/result-page/chorme.png" /> <thumbnail class="browser-icon" url="https://tdesign.gtimg.com/starter/result-page/chorme.png" />
@ -32,6 +32,7 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
import Thumbnail from '@/components/thumbnail/index.vue'; import Thumbnail from '@/components/thumbnail/index.vue';
import { t } from '@/locales';
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

13
src/pages/result/fail/index.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="result-success"> <div class="result-success">
<t-icon class="result-success-icon" name="error-circle" /> <t-icon class="result-success-icon" name="error-circle" />
<div class="result-success-title">{{ $t('pages.result.fail.title') }}</div> <div class="result-success-title">{{ t('pages.result.fail.title') }}</div>
<div class="result-success-describe">{{ $t('pages.result.fail.subtitle') }}</div> <div class="result-success-describe">{{ t('pages.result.fail.subtitle') }}</div>
<div> <div>
<t-button theme="default" @click="() => $router.push('/dashboard/base')">{{ <t-button theme="default" @click="() => $router.push('/dashboard/base')">{{
$t('pages.result.fail.back') t('pages.result.fail.back')
}}</t-button> }}</t-button>
<t-button @click="() => $router.push('/form/base')">{{ $t('pages.result.fail.modify') }} </t-button> <t-button @click="() => $router.push('/form/base')">{{ t('pages.result.fail.modify') }} </t-button>
</div> </div>
</div> </div>
</template> </template>
@ -16,6 +16,11 @@ export default {
name: 'ResultFail', name: 'ResultFail',
}; };
</script> </script>
<script lang="ts" setup>
import { t } from '@/locales';
</script>
<style lang="less" scoped> <style lang="less" scoped>
.result-success { .result-success {
display: flex; display: flex;

9
src/pages/result/maintenance/index.vue
View File

@ -1,10 +1,6 @@
<template> <template>
<result <result :title="t('pages.result.maintenance.title')" :tip="t('pages.result.maintenance.subtitle')" type="maintenance">
:title="$t('pages.result.maintenance.title')" <t-button theme="primary" @click="() => $router.push('/')">{{ t('pages.result.maintenance.back') }}</t-button>
:tip="$t('pages.result.maintenance.subtitle')"
type="maintenance"
>
<t-button theme="primary" @click="() => $router.push('/')">{{ $t('pages.result.maintenance.back') }}</t-button>
</result> </result>
</template> </template>
@ -15,4 +11,5 @@ export default {
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
import { t } from '@/locales';
</script> </script>

7
src/pages/result/network-error/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<result :title="$t('pages.result.networkError.title')" :tip="$t('pages.result.networkError.subtitle')" type="wifi"> <result :title="t('pages.result.networkError.title')" :tip="t('pages.result.networkError.subtitle')" type="wifi">
<div> <div>
<t-button theme="default" @click="() => $router.push('/')">{{ $t('pages.result.networkError.back') }}</t-button> <t-button theme="default" @click="() => $router.push('/')">{{ t('pages.result.networkError.back') }}</t-button>
<t-button @click="() => $router.push('/')">{{ $t('pages.result.networkError.reload') }}</t-button> <t-button @click="() => $router.push('/')">{{ t('pages.result.networkError.reload') }}</t-button>
</div> </div>
</result> </result>
</template> </template>
@ -14,4 +14,5 @@ export default {
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
import { t } from '@/locales';
</script> </script>

13
src/pages/result/success/index.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="result-success"> <div class="result-success">
<t-icon class="result-success-icon" name="check-circle" /> <t-icon class="result-success-icon" name="check-circle" />
<div class="result-success-title">{{ $t('pages.result.success.title') }}</div> <div class="result-success-title">{{ t('pages.result.success.title') }}</div>
<div class="result-success-describe">{{ $t('pages.result.success.subtitle') }}</div> <div class="result-success-describe">{{ t('pages.result.success.subtitle') }}</div>
<div> <div>
<t-button theme="default" @click="() => $router.push('/detail/advanced')"> <t-button theme="default" @click="() => $router.push('/detail/advanced')">
{{ $t('pages.result.success.progress') }} {{ t('pages.result.success.progress') }}
</t-button> </t-button>
<t-button @click="() => $router.push('/dashboard/base')"> {{ $t('pages.result.success.back') }} </t-button> <t-button @click="() => $router.push('/dashboard/base')"> {{ t('pages.result.success.back') }} </t-button>
</div> </div>
</div> </div>
</template> </template>
@ -16,6 +16,11 @@ export default {
name: 'ResultSuccess', name: 'ResultSuccess',
}; };
</script> </script>
<script setup lang="ts">
import { t } from '@/locales';
</script>
<style lang="less" scoped> <style lang="less" scoped>
.result-success { .result-success {
display: flex; display: flex;

25
src/pages/user/index.vue
View File

@ -4,19 +4,19 @@
<div class="user-left-greeting"> <div class="user-left-greeting">
<div> <div>
Hi，Image Hi，Image
<span class="regular"> {{ $t('pages.user.markDay') }}</span> <span class="regular"> {{ t('pages.user.markDay') }}</span>
</div> </div>
<img src="@/assets/assets-tencent-logo.png" class="logo" /> <img src="@/assets/assets-tencent-logo.png" class="logo" />
</div> </div>
<t-card class="user-info-list" :title="$t('pages.user.personalInfo.title')" :bordered="false"> <t-card class="user-info-list" :title="t('pages.user.personalInfo.title')" :bordered="false">
<template #actions> <template #actions>
<t-button theme="default" shape="square" variant="text"> <t-button theme="default" shape="square" variant="text">
<t-icon name="ellipsis" /> <t-icon name="ellipsis" />
</t-button> </t-button>
</template> </template>
<t-descriptions :column="4" item-layout="vertical"> <t-descriptions :column="4" item-layout="vertical">
<t-descriptions-item v-for="(item, index) in USER_INFO_LIST" :key="index" :label="$t(item.title)"> <t-descriptions-item v-for="(item, index) in USER_INFO_LIST" :key="index" :label="t(item.title)">
{{ item.content }} {{ item.content }}
</t-descriptions-item> </t-descriptions-item>
</t-descriptions> </t-descriptions>
@ -24,11 +24,11 @@
<t-card class="content-container" :bordered="false"> <t-card class="content-container" :bordered="false">
<t-tabs value="second"> <t-tabs value="second">
<t-tab-panel value="first" :label="$t('pages.user.contentList')"> <t-tab-panel value="first" :label="t('pages.user.contentList')">
<p>{{ $t('pages.user.contentList') }}</p> <p>{{ t('pages.user.contentList') }}</p>
</t-tab-panel> </t-tab-panel>
<t-tab-panel value="second" :label="$t('pages.user.contentList')"> <t-tab-panel value="second" :label="t('pages.user.contentList')">
<t-card :bordered="false" class="card-padding-no" :title="$t('pages.user.visitData')" describe="（次）"> <t-card :bordered="false" class="card-padding-no" :title="t('pages.user.visitData')" describe="（次）">
<template #actions> <template #actions>
<t-date-range-picker <t-date-range-picker
class="card-date-picker-container" class="card-date-picker-container"
@ -41,8 +41,8 @@
<div id="lineContainer" style="width: 100%; height: 328px" /> <div id="lineContainer" style="width: 100%; height: 328px" />
</t-card> </t-card>
</t-tab-panel> </t-tab-panel>
<t-tab-panel value="third" :label="$t('pages.user.contentList')"> <t-tab-panel value="third" :label="t('pages.user.contentList')">
<p>{{ $t('pages.user.contentList') }}</p> <p>{{ t('pages.user.contentList') }}</p>
</t-tab-panel> </t-tab-panel>
</t-tabs> </t-tabs>
</t-card> </t-card>
@ -52,10 +52,10 @@
<t-card class="user-intro" :bordered="false"> <t-card class="user-intro" :bordered="false">
<t-avatar size="80px">T</t-avatar> <t-avatar size="80px">T</t-avatar>
<div class="name">My Account</div> <div class="name">My Account</div>
<div class="position">{{ $t('pages.user.personalInfo.position') }}</div> <div class="position">{{ t('pages.user.personalInfo.position') }}</div>
</t-card> </t-card>
<t-card :title="$t('pages.user.teamMember')" class="user-team" :bordered="false"> <t-card :title="t('pages.user.teamMember')" class="user-team" :bordered="false">
<template #actions> <template #actions>
<t-button theme="default" shape="square" variant="text"> <t-button theme="default" shape="square" variant="text">
<t-icon name="ellipsis" /> <t-icon name="ellipsis" />
@ -68,7 +68,7 @@
</t-list> </t-list>
</t-card> </t-card>
<t-card :title="$t('pages.user.serviceProduction')" class="product-container" :bordered="false"> <t-card :title="t('pages.user.serviceProduction')" class="product-container" :bordered="false">
<template #actions> <template #actions>
<t-button theme="default" shape="square" variant="text"> <t-button theme="default" shape="square" variant="text">
<t-icon name="ellipsis" /> <t-icon name="ellipsis" />
@ -100,6 +100,7 @@ import ProductAIcon from '@/assets/assets-product-1.svg';
import ProductBIcon from '@/assets/assets-product-2.svg'; import ProductBIcon from '@/assets/assets-product-2.svg';
import ProductCIcon from '@/assets/assets-product-3.svg'; import ProductCIcon from '@/assets/assets-product-3.svg';
import ProductDIcon from '@/assets/assets-product-4.svg'; import ProductDIcon from '@/assets/assets-product-4.svg';
import { t } from '@/locales';
import { useSettingStore } from '@/store'; import { useSettingStore } from '@/store';
import { changeChartsTheme } from '@/utils/color'; import { changeChartsTheme } from '@/utils/color';
import { LAST_7_DAYS } from '@/utils/date'; import { LAST_7_DAYS } from '@/utils/date';

2
src/permission.ts
View File

@ -39,7 +39,7 @@ router.beforeEach(async (to, from, next) => {
next({ path: to.fullPath, replace: true, query: to.query }); next({ path: to.fullPath, replace: true, query: to.query });
} else { } else {
const redirect = decodeURIComponent((from.query.redirect || to.path) as string); const redirect = decodeURIComponent((from.query.redirect || to.path) as string);
next(to.path === redirect ? { ...to, replace: true } : { path: redirect }); next(to.path === redirect ? { ...to, replace: true } : { path: redirect, query: to.query });
return; return;
} }
} }

4
src/router/index.ts
View File

@ -39,6 +39,10 @@ export function mapModuleRouterList(modules: Record<string, unknown>): Array<Rou
return routerList; return routerList;
} }
/**
*
* @deprecated 未使用
*/
export const getRoutesExpanded = () => { export const getRoutesExpanded = () => {
const expandedRoutes: Array<string> = []; const expandedRoutes: Array<string> = [];