Merge branch 'develop' of github.com:Tencent/tdesign-vue-next-starter into develop

2024-11-10 11:44:40 +08:00 · 2022-09-13 16:54:18 +08:00 · 2022-09-13 16:54:18 +08:00 · a7f2e59ca4
commit a7f2e59ca4
parent c0024afa68 7e40754fc1
18 changed files with 298 additions and 93 deletions
--- a/README-en_US.md
+++ b/README-en_US.md
@ -0,0 +1,97 @@
+<p style="display:flex; justify-content: center">
+
+</p>
+<p align="center">
+  <a href="https://tdesign.tencent.com/starter/vue-next/#/dashboard/base" target="_blank">
+    <img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/starter/brand-logo.svg">
+  </a>
+</p>
+
+<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://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">
+  </a>
+</p>
+
+### 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.
+
+<p>
+  <a href="http://tdesign.tencent.com/starter/vue-next/">Live Preview</a>
+  ·
+  <a href="https://tdesign.tencent.com/starter/">Documentation</a>
+</p>
+
+<img src="docs/starter.png">
+
+### 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
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                 |
+
+### License
+
+The MIT License. Please see [the license file](LICENSE) for more information.
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -0,0 +1,120 @@
+
+<p style="display:flex; justify-content: center">
+
+</p>
+<p align="center">
+  <a href="https://tdesign.tencent.com/starter/vue-next/#/dashboard/base" target="_blank">
+    <img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/starter/brand-logo.svg">
+  </a>
+</p>
+
+<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://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">
+  </a>
+</p>
+
+简体中文 | [English](./README.md) 
+
+### 项目简介
+
+TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite2`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。
+
+<p>
+  <a href="http://tdesign.tencent.com/starter/vue-next/">在线预览</a>
+  ·
+  <a href="https://tdesign.tencent.com/starter/">使用文档</a>
+
+</p>
+
+<img src="docs/starter.png">
+
+### 特性
+
+- 内置多种常用的中后台页面
+- 完善的目录结构
+- 完善的代码规范配置
+- 支持暗黑模式
+- 自定义主题颜色
+- 多种空间布局
+- 内置 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)
+
+### 兼容性
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                  |
+
+### 开源协议
+
+TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-vue-next-starter/LICENSE)。
+
--- a/README.md
+++ b/README.md
@ -1,4 +1,3 @@
-
 <p style="display:flex; justify-content: center">

 </p>
@ -15,104 +14,86 @@
  </a>
 </p>

-### 项目简介
+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 .

 <p>
-  <a href="http://tdesign.tencent.com/starter/vue-next/">在线预览</a>
+  <a href="http://tdesign.tencent.com/starter/vue-next/">preview</a>
  ·
-  <a href="https://tdesign.tencent.com/starter/">使用文档</a>
+  <a href="https://tdesign.tencent.com/starter/">documentation</a>

 </p>

 <img src="docs/starter.png">

-### 特性
+### 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

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | 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)
--- 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",
--- a/src/App.vue
+++ b/src/App.vue
@ -2,8 +2,7 @@
  <router-view :class="[mode]" />
 </template>
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
-import config from '@/config/style';
+import { computed } from 'vue';
 import { useSettingStore } from '@/store';

 const store = useSettingStore();
@ -11,10 +10,6 @@ const store = useSettingStore();
 const mode = computed(() => {
  return store.displayMode;
 });
-
-onMounted(() => {
-  store.updateConfig({ ...config });
-});
 </script>
 <style lang="less" scoped>
@import '@/style/variables.less';
--- a/src/layouts/components/Breadcrumb.vue
+++ b/src/layouts/components/Breadcrumb.vue
@ -34,6 +34,6 @@ const crumbs = computed(() => {
 </script>
 <style scoped>
 .tdesign-breadcrumb {
-  margin-bottom: 8px;
+  margin-bottom: 24px;
 }
 </style>
--- 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';

+// <suspense>标签属于实验性功能，请谨慎使用
 // 如果存在需解决/page/1=> /page/2 刷新数据问题 请修改代码 使用activeRouteFullPath 作为key
+// <suspense>
 //  <component :is="Component" :key="activeRouteFullPath" />
+// </suspense>

 // import { useRouter } from 'vue-router';
 // const activeRouteFullPath = computed(() => {
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@ -24,7 +24,7 @@
 </template>

 <script setup lang="ts">
-import { computed, onMounted, watch, onBeforeUnmount } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
 import { useSettingStore, useTabsRouterStore } from '@/store';
@ -59,28 +59,10 @@ const appendNewRoute = () => {
  tabsRouterStore.appendTabRouterList({ path, query, title: title as string, name, isAlive: true });
 };

-const getTabRouterListCache = () => {
-  tabsRouterStore.initTabRouterList(JSON.parse(localStorage.getItem('tabRouterList')));
-};
-const setTabRouterListCache = () => {
-  const { tabRouters } = tabsRouterStore;
-  localStorage.setItem('tabRouterList', JSON.stringify(tabRouters));
-};
-
 onMounted(() => {
  appendNewRoute();
 });

-// 如果不需要持久化标签页可以注释掉以下的 onMounted 和 onBeforeUnmount 的内容
-onMounted(() => {
-  if (localStorage.getItem('tabRouterList')) getTabRouterListCache();
-  window.addEventListener('beforeunload', setTabRouterListCache);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener('beforeunload', setTabRouterListCache);
-});
-
 watch(
  () => route.path,
  () => {
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@ -124,8 +124,18 @@ const MODE_OPTIONS = [
  { type: 'dark', text: '暗黑' },
  { type: 'auto', text: '跟随系统' },
 ];
+const initStyleConfig = () => {
+  const styleConfig = STYLE_CONFIG;
+  for (const key in styleConfig) {
+    if (Object.prototype.hasOwnProperty.call(styleConfig, key)) {
+      styleConfig[key] = settingStore[key];
+    }
+  }

-const formData = ref({ ...STYLE_CONFIG });
+  return styleConfig;
+};
+
+const formData = ref({ ...initStyleConfig() });
 const isColoPickerDisplay = ref(false);

 const showSettingPanel = computed({
--- a/src/pages/dashboard/base/index.vue
+++ b/src/pages/dashboard/base/index.vue
@ -25,7 +25,7 @@ import OutputOverview from './components/OutputOverview.vue';
 </script>

 <style scoped>
-.row-container {
+.row-container:not(:last-child) {
  margin-bottom: 16px;
 }
 </style>
--- 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);
--- 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();
  }
--- 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 };

--- 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,
 });
--- 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() {
--- 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() {
--- 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() {
--- 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