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

This commit is contained in:
Uyarn 2023-03-15 15:58:42 +08:00
commit f77b936bbd
15 changed files with 55 additions and 64 deletions

3
.env
View File

@ -1,2 +1,5 @@
# 打包路径 根据项目不同按需配置 # 打包路径 根据项目不同按需配置
VITE_BASE_URL = / VITE_BASE_URL = /
VITE_IS_REQUEST_PROXY = true
VITE_API_URL = https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com
VITE_API_URL_PREFIX = /api

View File

@ -1,2 +1,5 @@
# 打包路径 # 打包路径
VITE_BASE_URL = / VITE_BASE_URL = /
VITE_IS_REQUEST_PROXY = true
VITE_API_URL = https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com
VITE_API_URL_PREFIX = /api

View File

@ -1,2 +1,5 @@
# 打包路径 根据项目不同按需配置 # 打包路径 根据项目不同按需配置
VITE_BASE_URL = https://static.tdesign.tencent.com/starter/vue-next/ VITE_BASE_URL = https://static.tdesign.tencent.com/starter/vue-next/
VITE_IS_REQUEST_PROXY = true
VITE_API_URL = https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com
VITE_API_URL_PREFIX = /api

5
.env.test Normal file
View File

@ -0,0 +1,5 @@
# 打包路径 根据项目不同按需配置
VITE_BASE_URL = /
VITE_IS_REQUEST_PROXY = true
VITE_API_URL = https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com
VITE_API_URL_PREFIX = /api

2
.gitignore vendored
View File

@ -21,3 +21,5 @@ yarn-error.log
yarn.lock yarn.lock
package-lock.json package-lock.json
pnpm-lock.yaml pnpm-lock.yaml
.env.local
.env.*.local

11
.vscode/settings.json vendored
View File

@ -21,5 +21,14 @@
"editor.formatOnSave": true, "editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint" "editor.defaultFormatter": "dbaeumer.vscode-eslint"
}, },
"cSpell.words": ["tdesign", "tvision", "echarts", "nprogress", "commitlint", "stylelint", "pinia", "qrcode"] "cSpell.words": [
"tdesign",
"tvision",
"echarts",
"nprogress",
"commitlint",
"stylelint",
"pinia",
"qrcode"
],
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "tdesign-vue-next-starter", "name": "tdesign-vue-next-starter",
"version": "0.7.2", "version": "0.7.3",
"scripts": { "scripts": {
"dev:mock": "vite --open --mode mock", "dev:mock": "vite --open --mode mock",
"dev": "vite --open --mode development", "dev": "vite --open --mode development",

View File

@ -1,27 +0,0 @@
export default {
isRequestProxy: true,
development: {
// 开发环境接口请求
host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
// 开发环境 cdn 路径
cdn: '',
},
test: {
// 测试环境接口地址
host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
// 测试环境 cdn 路径
cdn: '',
},
release: {
// 正式环境接口地址
host: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com',
// 正式环境 cdn 路径
cdn: '',
},
site: {
// TDesign部署特殊需要 与release功能一致
host: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com',
// 正式环境 cdn 路径
cdn: '',
},
};

View File

@ -95,7 +95,6 @@
import { ref, computed, onMounted, watchEffect } from 'vue'; import { ref, computed, onMounted, watchEffect } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
import type { PopupVisibleChangeContext } from 'tdesign-vue-next'; import type { PopupVisibleChangeContext } from 'tdesign-vue-next';
import { Color } from 'tvision-color';
import useClipboard from 'vue-clipboard3'; import useClipboard from 'vue-clipboard3';
import { useSettingStore } from '@/store'; import { useSettingStore } from '@/store';
@ -104,7 +103,6 @@ import ColorContainer from '@/components/color/index.vue';
import STYLE_CONFIG from '@/config/style'; import STYLE_CONFIG from '@/config/style';
import { DEFAULT_COLOR_OPTIONS } from '@/config/color'; import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
import { insertThemeStylesheet, generateColorMap } from '@/utils/color';
import SettingDarkIcon from '@/assets/assets-setting-dark.svg'; import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
import SettingLightIcon from '@/assets/assets-setting-light.svg'; import SettingLightIcon from '@/assets/assets-setting-light.svg';
@ -150,19 +148,7 @@ const showSettingPanel = computed({
}); });
const changeColor = (hex: string) => { const changeColor = (hex: string) => {
const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
colors: [hex],
step: 10,
remainInput: false, //
})[0];
const { mode } = settingStore;
const colorMap = generateColorMap(hex, newPalette, mode as 'light' | 'dark', brandColorIndex);
settingStore.addColor({ [hex]: colorMap });
formData.value.brandTheme = hex; formData.value.brandTheme = hex;
settingStore.updateConfig({ ...formData.value, brandTheme: hex });
insertThemeStylesheet(hex, colorMap, mode as 'light' | 'dark');
}; };
onMounted(() => { onMounted(() => {

View File

@ -4,10 +4,10 @@ import uniq from 'lodash/uniq';
const env = import.meta.env.MODE || 'development'; const env = import.meta.env.MODE || 'development';
// 导入homepage相关固定路由 // 导入homepage相关固定路由
const homepageModules = import.meta.globEager('./modules/**/homepage.ts'); const homepageModules = import.meta.glob('./modules/**/homepage.ts', { eager: true });
// 导入modules非homepage相关固定路由 // 导入modules非homepage相关固定路由
const fixedModules = import.meta.globEager('./modules/**/!(homepage).ts'); const fixedModules = import.meta.glob('./modules/**/!(homepage).ts', { eager: true });
// 其他固定路由 // 其他固定路由
const defaultRouterList: Array<RouteRecordRaw> = [ const defaultRouterList: Array<RouteRecordRaw> = [

View File

@ -1,7 +1,7 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { Color } from 'tvision-color'; import { Color } from 'tvision-color';
import keys from 'lodash/keys'; import keys from 'lodash/keys';
import { LIGHT_CHART_COLORS, DARK_CHART_COLORS, TColorSeries } from '@/config/color'; import { LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
import { insertThemeStylesheet, generateColorMap } from '@/utils/color'; import { insertThemeStylesheet, generateColorMap } from '@/utils/color';
import STYLE_CONFIG from '@/config/style'; import STYLE_CONFIG from '@/config/style';
import { store } from '@/store'; import { store } from '@/store';
@ -51,21 +51,24 @@ export const useSettingStore = defineStore('setting', {
this.chartColors = isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS; this.chartColors = isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS;
}, },
changeBrandTheme(brandTheme: string) { changeBrandTheme(brandTheme: string) {
const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({ const mode = this.displayMode;
// 以主题色加显示模式作为键
const colorKey = `${brandTheme}[${mode}]`;
let colorMap = this.colorList[colorKey];
// 如果不存在色阶,就需要计算
if (colorMap === undefined) {
const [{ colors: newPalette, primary: brandColorIndex }] = Color.getColorGradations({
colors: [brandTheme], colors: [brandTheme],
step: 10, step: 10,
remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色 remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
})[0]; });
const { mode } = this; colorMap = generateColorMap(brandTheme, newPalette, mode as 'light' | 'dark', brandColorIndex);
const colorMap = generateColorMap(brandTheme, newPalette, mode as 'light' | 'dark', brandColorIndex); this.colorList[colorKey] = colorMap;
}
// TODO 需要解决不停切换时有反复插入 style 的问题
insertThemeStylesheet(brandTheme, colorMap, mode as 'light' | 'dark'); insertThemeStylesheet(brandTheme, colorMap, mode as 'light' | 'dark');
document.documentElement.setAttribute('theme-color', brandTheme); document.documentElement.setAttribute('theme-color', brandTheme);
}, },
addColor(payload: TColorSeries) {
this.colorList = { ...this.colorList, ...payload };
},
updateConfig(payload: Partial<TState>) { updateConfig(payload: Partial<TState>) {
for (const key in payload) { for (const key in payload) {
if (payload[key] !== undefined) { if (payload[key] !== undefined) {

5
src/types/env.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
export interface ImportMetaEnv {
readonly VITE_IS_REQUEST_PROXY: string;
readonly VITE_API_URL: string;
readonly VITE_API_URL_PREFIX: string;
}

View File

@ -4,7 +4,6 @@ import merge from 'lodash/merge';
import type { InternalAxiosRequestConfig } from 'axios'; import type { InternalAxiosRequestConfig } from 'axios';
import type { AxiosTransform, CreateAxiosOptions } from './AxiosTransform'; import type { AxiosTransform, CreateAxiosOptions } from './AxiosTransform';
import { VAxios } from './Axios'; import { VAxios } from './Axios';
import proxy from '@/config/proxy';
import { joinTimestamp, formatRequestDate, setObjToUrlParams } from './utils'; import { joinTimestamp, formatRequestDate, setObjToUrlParams } from './utils';
import { TOKEN_NAME } from '@/config/global'; import { TOKEN_NAME } from '@/config/global';
import { ContentTypeEnum } from '@/constants'; import { ContentTypeEnum } from '@/constants';
@ -12,7 +11,7 @@ import { ContentTypeEnum } from '@/constants';
const env = import.meta.env.MODE || 'development'; const env = import.meta.env.MODE || 'development';
// 如果是mock模式 或 没启用直连代理 就不配置host 会走本地Mock拦截 或 Vite 代理 // 如果是mock模式 或 没启用直连代理 就不配置host 会走本地Mock拦截 或 Vite 代理
const host = env === 'mock' || !proxy.isRequestProxy ? '' : proxy[env].host; const host = env === 'mock' || import.meta.env.VITE_IS_REQUEST_PROXY !== 'true' ? '' : import.meta.env.VITE_API_URL;
// 数据处理,方便区分多种处理方式 // 数据处理,方便区分多种处理方式
const transform: AxiosTransform = { const transform: AxiosTransform = {
@ -172,7 +171,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
// 接口前缀 // 接口前缀
// 例如: https://www.baidu.com/api // 例如: https://www.baidu.com/api
// urlPrefix: '/api' // urlPrefix: '/api'
urlPrefix: '/api', urlPrefix: import.meta.env.VITE_API_URL_PREFIX,
// 是否返回原生响应头 比如:需要获取响应头时使用该属性 // 是否返回原生响应头 比如:需要获取响应头时使用该属性
isReturnNativeResponse: false, isReturnNativeResponse: false,
// 需要对返回数据进行处理 // 需要对返回数据进行处理

View File

@ -4,7 +4,7 @@ module.exports = {
plugins: ['stylelint-less'], plugins: ['stylelint-less'],
overrides: [ overrides: [
{ {
files: ['**/*.vue'], files: ['**/*.html', '**/*.vue'],
customSyntax: 'postcss-html', customSyntax: 'postcss-html',
}, },
{ {

View File

@ -10,7 +10,7 @@ const CWD = process.cwd();
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default ({ mode }: ConfigEnv): UserConfig => { export default ({ mode }: ConfigEnv): UserConfig => {
const { VITE_BASE_URL } = loadEnv(mode, CWD); const { VITE_BASE_URL, VITE_API_URL_PREFIX } = loadEnv(mode, CWD);
return { return {
base: VITE_BASE_URL, base: VITE_BASE_URL,
resolve: { resolve: {
@ -45,7 +45,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
port: 3002, port: 3002,
host: '0.0.0.0', host: '0.0.0.0',
proxy: { proxy: {
'/api': 'http://127.0.0.1:3000/', [VITE_API_URL_PREFIX]: 'http://127.0.0.1:3000/',
}, },
}, },
}; };