diff --git a/ README-en_US.md b/ README-en_US.md new file mode 100644 index 0000000..f8f7453 --- /dev/null +++ b/ README-en_US.md @@ -0,0 +1,97 @@ +

+ +

+

+ + TDesign Logo + +

+ +

+ node compatility + + License + +

+ +### Introduction + +TDesign Vue Next Starter is a TDesign-based developed with `Vue3`, `Vite2`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects. + +

+ Live Preview + · + Documentation +

+ + + +### Features + +- Various provided pages for develop +- Complete directory structure for develop +- Code specification configuration +- Support dark mode +- Custom theme colors +- Various space layouts +- Mock data scheme + +### Usage + +> Initialize project with our CLI tool `tdesign-starter-cli` + +```bash +## install tdesign-starter-cli +npm i tdesign-starter-cli@latest -g + +## create project +td-starter init +``` + +### Develop + +```bash +## install dependencies +npm install + +## set up +npm run dev +``` + +### Build + +```bash +## build +npm run build + +## build for test +npm run build:test +``` + + +### Contributing Guide + +We welcome contributions to our project. Create your [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) or Submit your [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls). + +#### Pull Request + +1. Fork it! +2. Create your branch: `git checkout -b feat/xxxx` +3. Commit: `git commit -a 'feat(project): describe'` +4. Push: `git push origin feat/xxxx` +5. New Pull Request `pull request` + +#### Commit Specification + +- [Angular Convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) +- [Vue Style Guide](https://v3.vuejs.org/style-guide/#rule-categories) + +### Compatibility + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 | + +### License + +The MIT License. Please see [the license file](LICENSE) for more information. diff --git a/README-zh_CN.md b/README-zh_CN.md new file mode 100644 index 0000000..ad43c9c --- /dev/null +++ b/README-zh_CN.md @@ -0,0 +1,120 @@ + +

+ +

+

+ + TDesign Logo + +

+ +

+ node compatility + + License + +

+ +简体中文 | [English](./README.md) + +### 项目简介 + +TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite2`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。 + +

+ 在线预览 + · + 使用文档 + +

+ + + +### 特性 + +- 内置多种常用的中后台页面 +- 完善的目录结构 +- 完善的代码规范配置 +- 支持暗黑模式 +- 自定义主题颜色 +- 多种空间布局 +- 内置 Mock 数据方案 + +### 使用 + +> 通过 `tdesign-starter-cli` 初始化项目仓库 + +```bash +## 1、安装 tdesign-starter-cli +npm i tdesign-starter-cli@latest -g + +## 2、创建项目 +td-starter init +``` + +### 开发 + +``` bash +## 安装依赖 +npm install + +## 启动项目 +npm run dev +``` + +### 构建 + +```bash +## 构建正式环境 +npm run build + +## 构建测试环境 +npm run build:test +``` + +### 其他 + +```bash +## 预览构建产物 +npm run preview + +## 代码格式检查 +npm run lint + +## 代码格式检查与自动修复 +npm run lint:fix + +## style格式检查 +npm run stylelint + +## style格式检查与自动修复 +npm run stylelint:fix +``` + +### 如何贡献 + +非常欢迎您的贡献！提交您的 [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) 或者提交 [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls)。 + +#### Pull Request + +1. Fork 代码! +2. 创建自己的分支: `git checkout -b feat/xxxx` +3. 提交你的修改: `git commit -a 'feat(project): describe'` +4. 推送您的分支: `git push origin feat/xxxx` +5. 提交 `pull request` + +#### 贡献提交规范 + +- [Angular Convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) +- [Vue Style Guide](https://v3.vuejs.org/style-guide/#rule-categories) + +### 兼容性 + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 | + +### 开源协议 + +TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-vue-next-starter/LICENSE)。 + diff --git a/README.md b/README.md index 1f15c15..beed009 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ -

@@ -15,104 +14,86 @@

-### 项目简介 +English | [简体中文](./README-zh_CN.md) +### Introduction -TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite2`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。 +TDesign Vue Next Starter is a TDesign-based, developed with `Vue3`, `Vite2`, `Pinia`, `TypeScript`, which can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects .

- 在线预览 + preview · - 使用文档 + documentation

-### 特性 +### Features -- 内置多种常用的中后台页面 -- 完善的目录结构 -- 完善的代码规范配置 -- 支持暗黑模式 -- 自定义主题颜色 -- 多种空间布局 -- 内置 Mock 数据方案 +- Various provided pages for develop +- Complete Directory Structure for develop +- Code Specification Configuration +- Dark Mode +- Custom theme colors +- Various space layouts +- Mock Data Scheme -### 使用 +### Usage -> 通过 `tdesign-starter-cli` 初始化项目仓库 +> init project with our CLI tool `tdesign-starter-cli` ```bash -## 1、安装 tdesign-starter-cli +## install tdesign-starter-cli npm i tdesign-starter-cli@latest -g -## 2、创建项目 +## 2、create project td-starter init ``` -### 开发 +### Develop -``` bash -## 安装依赖 +```bash +## install dependencies npm install -## 启动项目 +## set up npm run dev ``` -### 构建 +### Build ```bash -## 构建正式环境 +## build npm run build -## 构建测试环境 +## build for test npm run build:test ``` -### 其他 -```bash -## 预览构建产物 -npm run preview +### Contributing -## 代码格式检查 -npm run lint - -## 代码格式检查与自动修复 -npm run lint:fix - -## style格式检查 -npm run stylelint - -## style格式检查与自动修复 -npm run stylelint:fix -``` - -### 如何贡献 - -非常欢迎您的贡献！提交您的 [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) 或者提交 [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls)。 +Contributing is welcome！Create your [Issue](https://github.com/tencent/tdesign-vue-next-starter/issues/new/choose) or Submit your [Pull Request](https://github.com/Tencent/tdesign-vue-next-starter/pulls)。 #### Pull Request -1. Fork 代码! -2. 创建自己的分支: `git checkout -b feat/xxxx` -3. 提交你的修改: `git commit -a 'feat(project): describe'` -4. 推送您的分支: `git push origin feat/xxxx` -5. 提交 `pull request` +1. Fork it! +2. Create your branch: `git checkout -b feat/xxxx` +3. Commit: `git commit -a 'feat(project): describe'` +4. Push: `git push origin feat/xxxx` +5. New Pull Request `pull request` -#### 贡献提交规范 +#### Commit Specification - [Angular Convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) - [Vue Style Guide](https://v3.vuejs.org/style-guide/#rule-categories) -### 兼容性 +### Compatibility | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 | +| Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 | -### 开源协议 - -TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-vue-next-starter/LICENSE)。 +### LICENSE +[MIT](https://github.com/Tencent/tdesign-vue-next-starter/LICENSE) diff --git a/package.json b/package.json index 6b38114..ea54b6a 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "lodash": "^4.17.21", "nprogress": "^0.2.0", "pinia": "^2.0.11", + "pinia-plugin-persistedstate": "^2.1.1", "qrcode.vue": "^3.2.2", "qs": "^6.10.5", "tdesign-icons-vue-next": "^0.1.1", diff --git a/src/App.vue b/src/App.vue index 44f6fc9..18cd85d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,8 +2,7 @@ diff --git a/src/layouts/components/Content.vue b/src/layouts/components/Content.vue index 615b023..eff4439 100644 --- a/src/layouts/components/Content.vue +++ b/src/layouts/components/Content.vue @@ -12,8 +12,11 @@ import { computed, ComputedRef } from 'vue'; import { useTabsRouterStore } from '@/store'; +// 标签属于实验性功能，请谨慎使用 // 如果存在需解决/page/1=> /page/2 刷新数据问题 请修改代码 使用activeRouteFullPath 作为key -// +// +// +// // import { useRouter } from 'vue-router'; // const activeRouteFullPath = computed(() => { diff --git a/src/layouts/index.vue b/src/layouts/index.vue index 2975c78..3e88460 100644 --- a/src/layouts/index.vue +++ b/src/layouts/index.vue @@ -24,7 +24,7 @@ diff --git a/src/pages/result/browser-incompatible/index.vue b/src/pages/result/browser-incompatible/index.vue index 711be8a..312fdda 100644 --- a/src/pages/result/browser-incompatible/index.vue +++ b/src/pages/result/browser-incompatible/index.vue @@ -38,14 +38,14 @@ import Thumbnail from '@/components/thumbnail/index.vue'; align-items: center; justify-content: space-between; color: var(--td-text-color-secondary); + height: calc(75vh - 254px); + min-height: 156px; } .recommend-container { - position: absolute; display: flex; align-items: center; justify-content: space-between; - top: 175px; padding: 24px 48px; width: 640px; background: var(--td-bg-color-container); diff --git a/src/permission.ts b/src/permission.ts index 0605c26..5bb3310 100644 --- a/src/permission.ts +++ b/src/permission.ts @@ -5,16 +5,15 @@ import 'nprogress/nprogress.css'; // progress bar style import { getPermissionStore, getUserStore } from '@/store'; import router from '@/router'; -const permissionStore = getPermissionStore(); -const userStore = getUserStore(); - NProgress.configure({ showSpinner: false }); -const { whiteListRouters } = permissionStore; - router.beforeEach(async (to, from, next) => { NProgress.start(); + const userStore = getUserStore(); + const permissionStore = getPermissionStore(); + const { whiteListRouters } = permissionStore; + const { token } = userStore; if (token) { if (to.path === '/login') { @@ -58,6 +57,9 @@ router.beforeEach(async (to, from, next) => { router.afterEach((to) => { if (to.path === '/login') { + const userStore = getUserStore(); + const permissionStore = getPermissionStore(); + userStore.logout(); permissionStore.restore(); } diff --git a/src/store/index.ts b/src/store/index.ts index 20e1448..53b6007 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,6 +1,8 @@ import { createPinia } from 'pinia'; +import { createPersistedState } from 'pinia-plugin-persistedstate'; const store = createPinia(); +store.use(createPersistedState()); export { store }; diff --git a/src/store/modules/notification.ts b/src/store/modules/notification.ts index 3e46c7d..8c7325e 100644 --- a/src/store/modules/notification.ts +++ b/src/store/modules/notification.ts @@ -73,4 +73,5 @@ export const useNotificationStore = defineStore('notification', { this.msgData = data; }, }, + persist: true, }); diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts index 7c6705e..0d8b22c 100644 --- a/src/store/modules/setting.ts +++ b/src/store/modules/setting.ts @@ -1,4 +1,5 @@ import { defineStore } from 'pinia'; +import keys from 'lodash/keys'; import { COLOR_TOKEN, LIGHT_CHART_COLORS, DARK_CHART_COLORS, TColorSeries } from '@/config/color'; import STYLE_CONFIG from '@/config/style'; import { store } from '@/store'; @@ -67,6 +68,9 @@ export const useSettingStore = defineStore('setting', { } }, }, + persist: { + paths: [...keys(STYLE_CONFIG), 'colorList', 'chartColors'], + }, }); export function getSettingStore() { diff --git a/src/store/modules/tabs-router.ts b/src/store/modules/tabs-router.ts index 1cb3586..d52961c 100644 --- a/src/store/modules/tabs-router.ts +++ b/src/store/modules/tabs-router.ts @@ -68,6 +68,7 @@ export const useTabsRouterStore = defineStore('tabsRouter', { newRoutes?.forEach((route: TRouterInfo) => this.appendTabRouterList(route)); }, }, + persist: true, }); export function getTabsRouterStore() { diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 575af0f..fba0728 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -1,6 +1,6 @@ import { defineStore } from 'pinia'; import { TOKEN_NAME } from '@/config/global'; -import { store } from '@/store'; +import { store, usePermissionStore } from '@/store'; const InitUserInfo = { roles: [], @@ -79,6 +79,12 @@ export const useUserStore = defineStore('user', { this.token = ''; }, }, + persist: { + afterRestore: (ctx) => { + const permissionStore = usePermissionStore(); + permissionStore.initRoutes(ctx.store.roles); + }, + }, }); export function getUserStore() { diff --git a/src/style/layout.less b/src/style/layout.less index fd0f838..e523261 100644 --- a/src/style/layout.less +++ b/src/style/layout.less @@ -108,7 +108,7 @@ &-footer-layout { padding: 0; - margin-bottom: @spacer-2; + margin-bottom: @spacer-3; } // slideBar