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:46:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #25 from Tencent/fix/custom-theme-mode

Browse Source 
fix: copy custom config
This commit is contained in:
PY 2021-12-31 15:08:38 +08:00 committed by GitHub
commit a417342d3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -2,8 +2,9 @@
<router-view :class="[mode]" /> <router-view :class="[mode]" />
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, computed } from 'vue'; import { defineComponent, computed, onMounted } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import config from '@/config/style';
export default defineComponent({ export default defineComponent({
setup() { setup() {
@ -13,6 +14,9 @@ export default defineComponent({
return store.getters['setting/mode']; return store.getters['setting/mode'];
}); });
onMounted(() => {
store.dispatch('setting/changeTheme', { ...config });
});
return { return {
mode, mode,
}; };

17
src/layouts/setting.vue
View File

@ -84,7 +84,7 @@
</t-form-item> </t-form-item>
</t-form> </t-form>
<div class="setting-info"> <div class="setting-info">
<p>请复制后手动修改配置文件: /src/config/style.js</p> <p>请复制后手动修改配置文件: /src/config/style.ts</p>
<t-button theme="primary" variant="text" @click="handleCopy"> 复制配置项 </t-button> <t-button theme="primary" variant="text" @click="handleCopy"> 复制配置项 </t-button>
</div> </div>
</div> </div>
@ -96,6 +96,8 @@ import { useStore } from 'vuex';
import { ColorPicker } from 'vue-color-kit'; import { ColorPicker } from 'vue-color-kit';
import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next'; import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
import { Color } from 'tvision-color'; import { Color } from 'tvision-color';
import useClipboard from 'vue-clipboard3';
import 'vue-color-kit/dist/vue-color-kit.css'; import 'vue-color-kit/dist/vue-color-kit.css';
import STYLE_CONFIG from '@/config/style'; import STYLE_CONFIG from '@/config/style';
@ -191,8 +193,17 @@ export default defineComponent({
}; };
const handleCopy = () => { const handleCopy = () => {
MessagePlugin.closeAll(); const text = JSON.stringify(formData.value, null, 4);
MessagePlugin.success('复制成功'); const { toClipboard } = useClipboard();
toClipboard(text)
.then(() => {
MessagePlugin.closeAll();
MessagePlugin.success('复制成功');
})
.catch(() => {
MessagePlugin.closeAll();
MessagePlugin.error('复制失败');
});
}; };
const getModeIcon = (mode: string) => { const getModeIcon = (mode: string) => {
if (mode === 'light') { if (mode === 'light') {

19
src/store/modules/setting.ts
View File

@ -73,7 +73,7 @@ const actions = {
dispatch('changeBrandTheme', payload); dispatch('changeBrandTheme', payload);
commit('update', payload); commit('update', payload);
}, },
async changeMode({ commit, state }, payload: IStateType) { async changeMode({ commit }, payload: IStateType) {
let theme = payload.mode; let theme = payload.mode;
if (payload.mode === 'auto') { if (payload.mode === 'auto') {
@ -85,20 +85,15 @@ const actions = {
} }
} }
const isDarkMode = theme === 'dark'; const isDarkMode = theme === 'dark';
if (theme !== state.mode) {
document.documentElement.setAttribute('theme-mode', isDarkMode ? 'dark' : ''); document.documentElement.setAttribute('theme-mode', isDarkMode ? 'dark' : '');
}
commit('changeChartColor', isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS); commit('changeChartColor', isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS);
}, },
changeBrandTheme({ state }: { state: IStateType }, payload: IStateType) { changeBrandTheme(_: { state: IStateType }, payload: IStateType) {
const { brandTheme, mode } = payload; const { brandTheme } = payload;
if (brandTheme !== state.brandTheme) {
document.documentElement.setAttribute( document.documentElement.setAttribute('theme-color', brandTheme);
'theme-color',
/^#([a-fA-F\d]{6}|[a-fA-F\d]{3})$/.test(brandTheme) && mode === 'dark' ? `${brandTheme}` : brandTheme,
);
}
}, },
}; };