mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-24 10:06:34 +08:00
site: use theme-generator-plugin (#496)
* feat: replace color with theme generator plugin * feat: remove variables * feat: upgrade v1 * chore: upgrade v1 * feat: adjust page config panel style * feat: add dock * chore: remove dead code * feat: upgrade setting config * feat: complete page config detail * feat: upgrade theme generator
This commit is contained in:
yuyang
GitHub
parent
4bcf7d22aa
commit
4cc75cdaf7
|
|
@ -29,7 +29,8 @@
|
||||||
"qrcode.vue": "^3.3.4",
|
"qrcode.vue": "^3.3.4",
|
||||||
"qs": "^6.11.1",
|
"qs": "^6.11.1",
|
||||||
"tdesign-icons-vue-next": "^0.1.8",
|
"tdesign-icons-vue-next": "^0.1.8",
|
||||||
"tdesign-vue-next": "^1.2.2",
|
"tdesign-theme-generator": "^1.0.4",
|
||||||
|
"tdesign-vue-next": "^1.3.1",
|
||||||
"tvision-color": "^1.5.0",
|
"tvision-color": "^1.5.0",
|
||||||
"vue": "^3.2.47",
|
"vue": "^3.2.47",
|
||||||
"vue-clipboard3": "^2.0.0",
|
"vue-clipboard3": "^2.0.0",
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<router-view :class="[mode]" />
|
<router-view :class="[mode]" />
|
||||||
|
<setting-component />
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
import SettingComponent from '@/layouts/setting/index.vue';
|
||||||
import { useSettingStore } from '@/store';
|
import { useSettingStore } from '@/store';
|
||||||
|
|
||||||
const store = useSettingStore();
|
const store = useSettingStore();
|
||||||
|
|
|
||||||
6
src/assets/assets-adjust-icon.svg
Normal file
6
src/assets/assets-adjust-icon.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg data-v-7ab44b3a="" width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
style="">
|
||||||
|
<path data-v-7ab44b3a=""
|
||||||
|
d="M14.5 2.5V6H19.75C20.7165 6 21.5 6.7835 21.5 7.75V11.25C21.5 12.1325 20.8468 12.8624 19.9975 12.9826L21.2146 21.5025C21.3653 22.5568 20.5472 23.5 19.4822 23.5H2.51777C1.45281 23.5 0.634747 22.5568 0.785355 21.5025L2.00248 12.9826C1.1532 12.8624 0.5 12.1325 0.5 11.25V7.75C0.5 6.7835 1.2835 6 2.25 6H7.5V2.5C7.5 1.5335 8.2835 0.75 9.25 0.75H12.75C13.7165 0.75 14.5 1.5335 14.5 2.5ZM18.2322 13H3.76777L2.51777 21.75H5.75V18.25H7.5V21.75H10.125V18.25H11.875V21.75H14.5V18.25H16.25V21.75H19.4822L18.2322 13Z"
|
||||||
|
fill="currentColor"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 715 B |
6
src/assets/assets-copy-icon.svg
Normal file
6
src/assets/assets-copy-icon.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 23H2V5H4V21H15V23Z" fill="currentColor" />
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||||
|
d="M15.4142 1H6V19H21V6.58579L15.4142 1ZM15 3.41421L18.5858 7H15V3.41421ZM19 9H13V3H8V17H19V9Z"
|
||||||
|
fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 387 B |
18
src/assets/assets-layout-mix.svg
Normal file
18
src/assets/assets-layout-mix.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<svg width="92" height="64" viewBox="0 0 92 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_25494_106151)">
|
||||||
|
<rect width="92" height="64" fill="#F3F3F3" />
|
||||||
|
<path d="M8 14C8 10.6863 10.6863 8 14 8H78C81.3137 8 84 10.6863 84 14V64H8V14Z" fill="white" />
|
||||||
|
<rect x="8" y="8" width="76" height="14" fill="#242424" />
|
||||||
|
<rect x="8" y="22" width="22" height="41" fill="#DCDCDC" />
|
||||||
|
<g filter="url(#filter0_d_25494_106151)">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||||
|
d="M69.4289 46.207L74.3786 51.1567L83.571 41.9644L84.9852 43.3786L74.3786 53.9852L68.0146 47.6212L69.4289 46.207Z"
|
||||||
|
fill="white" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_25494_106151">
|
||||||
|
<rect width="92" height="64" rx="9" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 884 B |
13
src/assets/assets-layout-side.svg
Normal file
13
src/assets/assets-layout-side.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<svg width="92" height="64" viewBox="0 0 92 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_25494_106074)">
|
||||||
|
<rect width="92" height="64" fill="#F3F3F3" />
|
||||||
|
<path d="M8 14C8 10.6863 10.6863 8 14 8H78C81.3137 8 84 10.6863 84 14V64H8V14Z" fill="white" />
|
||||||
|
<rect x="30" y="8" width="54" height="14" fill="#DCDCDC" />
|
||||||
|
<rect x="8" y="8" width="22" height="55" fill="#242424" />
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_25494_106074">
|
||||||
|
<rect width="92" height="64" rx="9" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 600 B |
12
src/assets/assets-layout-top.svg
Normal file
12
src/assets/assets-layout-top.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<svg width="92" height="64" viewBox="0 0 92 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_25494_106087)">
|
||||||
|
<rect width="92" height="64" fill="#F3F3F3" />
|
||||||
|
<path d="M8 14C8 10.6863 10.6863 8 14 8H78C81.3137 8 84 10.6863 84 14V64H8V14Z" fill="white" />
|
||||||
|
<rect x="8" y="8" width="76" height="14" fill="#242424" />
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_25494_106087">
|
||||||
|
<rect width="92" height="64" rx="9" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 532 B |
5
src/assets/assets-palette-icon.svg
Normal file
5
src/assets/assets-palette-icon.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||||
|
d="M12 1C5.92487 1 1 5.92487 1 12C1 18.042 5.54478 22.8971 11.6525 22.8971C12.183 22.8971 12.7172 22.8217 13.1424 22.5468C13.6567 22.2143 13.8565 21.697 13.8419 21.209C13.8297 20.8004 13.6721 20.4347 13.5521 20.1961C13.4359 19.9652 13.2963 19.7438 13.2 19.5911L13.1731 19.5483C12.9286 19.1594 12.7989 18.743 12.8227 18.3628C12.8444 18.0158 12.9984 17.596 13.5249 17.1555C13.9295 16.8169 14.463 16.7376 15.3798 16.7739C15.5177 16.7794 15.6676 16.7882 15.8269 16.7976C16.603 16.8433 17.6033 16.9022 18.535 16.6508C21.0902 15.9613 22.8253 14.0956 22.9977 11.5309C23.4176 5.28585 17.931 1 12 1ZM13.75 7.00391C13.75 5.89934 12.8546 5.00391 11.75 5.00391C10.6454 5.00391 9.75 5.89934 9.75 7.00391C9.75 8.10848 10.6454 9.00391 11.75 9.00391C12.8546 9.00391 13.75 8.10848 13.75 7.00391ZM7.0293 8.00391C8.13387 8.00391 9.0293 8.89934 9.0293 10.0039C9.0293 11.1085 8.13387 12.0039 7.0293 12.0039C5.92473 12.0039 5.0293 11.1085 5.0293 10.0039C5.0293 8.89934 5.92473 8.00391 7.0293 8.00391ZM18.5176 10.0039C18.5176 8.89934 17.6221 8.00391 16.5176 8.00391C15.413 8.00391 14.5176 8.89934 14.5176 10.0039C14.5176 11.1085 15.413 12.0039 16.5176 12.0039C17.6221 12.0039 18.5176 11.1085 18.5176 10.0039Z"
|
||||||
|
fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
23
src/assets/assets-picked.svg
Normal file
23
src/assets/assets-picked.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M36 0V27C36 31.9706 31.9706 36 27 36H0C0 16.1177 16.1177 0 36 0Z"
|
||||||
|
fill="black" fill-opacity="0.6" />
|
||||||
|
<g filter="url(#filter0_d_25494_106030)">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||||
|
d="M13.4289 18.207L18.3786 23.1567L27.571 13.9644L28.9852 15.3786L18.3786 25.9852L12.0146 19.6212L13.4289 18.207Z"
|
||||||
|
fill="white" />
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_25494_106030" x="11.0146" y="13.9644" width="18.9705" height="14.0208"
|
||||||
|
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||||
|
result="hardAlpha" />
|
||||||
|
<feOffset dy="1" />
|
||||||
|
<feGaussianBlur stdDeviation="0.5" />
|
||||||
|
<feComposite in2="hardAlpha" operator="out" />
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" />
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25494_106030" />
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25494_106030" result="shape" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
5
src/assets/assets-revoke-icon.svg
Normal file
5
src/assets/assets-revoke-icon.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||||
|
d="M1.08557 6.9999L5.99979 2.08569L7.414 3.4999L4.914 5.99991H14.5C17.9977 5.99991 21.5 8.89461 21.5 12.9999C21.5 17.1052 17.9977 19.9999 14.5 19.9999H5V17.9999H14.5C17.0023 17.9999 19.5 15.8945 19.5 12.9999C19.5 10.1053 17.0023 7.99991 14.5 7.99991H4.91401L7.414 10.4999L5.99979 11.9141L1.08557 6.9999Z"
|
||||||
|
fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
|
|
@ -1,13 +1,43 @@
|
||||||
<svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="92" height="64" viewBox="0 0 92 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M0 0H88V48H0V0Z" fill="var(--td-component-border)"/>
|
<g clip-path="url(#clip0_25494_106056)">
|
||||||
<path d="M42.8627 14.0518V16.7601H44.4877V14.0518H42.8627Z" fill="var(--td-text-color-primary)"/>
|
<rect width="46" height="64" fill="#5E5E5E" />
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.3488 23.9824C38.3488 21.0407 40.7335 18.656 43.6752 18.656C46.6168 18.656 49.0015 21.0407 49.0015 23.9824C49.0015 26.9241 46.6168 29.3088 43.6752 29.3088C40.7335 29.3088 38.3488 26.9241 38.3488 23.9824ZM43.6752 20.281C41.6309 20.281 39.9738 21.9382 39.9738 23.9824C39.9738 26.0266 41.6309 27.6838 43.6752 27.6838C45.7194 27.6838 47.3766 26.0266 47.3766 23.9824C47.3766 21.9382 45.7194 20.281 43.6752 20.281Z" fill="var(--td-text-color-primary)"/>
|
<rect x="46" width="46" height="64" fill="#F3F3F3" />
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.208 26.781H49.5867L47.5262 33.48L49.0794 33.9577L49.5903 32.2968H52.2045L52.7154 33.9577L54.2686 33.48L52.208 26.781ZM51.7047 30.6718L51.0077 28.406H50.787L50.0901 30.6718H51.7047Z" fill="var(--td-text-color-primary)"/>
|
<path d="M8 14C8 10.6863 10.6863 8 14 8H46V64H8V14Z" fill="#242424" />
|
||||||
<path d="M48.2077 18.3009L50.1225 16.3861L51.2715 17.5351L49.3567 19.4499L48.2077 18.3009Z" fill="var(--td-text-color-primary)"/>
|
<path
|
||||||
<path d="M53.6057 23.1699H50.8974V24.7949H53.6057V23.1699Z" fill="var(--td-text-color-primary)"/>
|
d="M27.0001 18.75C22.4437 18.75 18.75 22.4437 18.75 27.0001C18.75 31.5565 22.4437 35.2501 27.0001 35.2501C31.5565 35.2501 35.2501 31.5565 35.2501 27.0001C35.2501 26.4283 35.1919 25.8693 35.0806 25.3291C35.0104 24.9876 34.714 24.7396 34.3655 24.7305C34.017 24.7215 33.7082 24.9537 33.6203 25.2911C33.1695 27.0202 31.5964 28.2955 29.7274 28.2955C27.5056 28.2955 25.7046 26.4945 25.7046 24.2728C25.7046 22.4037 26.98 20.8306 28.7091 20.3798C29.0464 20.2919 29.2787 19.9831 29.2696 19.6346C29.2605 19.2861 29.0125 18.9898 28.671 18.9195C28.1308 18.8083 27.5718 18.75 27.0001 18.75Z"
|
||||||
<path d="M44.4877 31.2045V33.9129H42.8627V31.2045H44.4877Z" fill="var(--td-text-color-primary)"/>
|
fill="white" />
|
||||||
<path d="M37.2279 31.5786L39.1427 29.6638L37.9936 28.5147L36.0788 30.4295L37.2279 31.5786Z" fill="var(--td-text-color-primary)"/>
|
<path d="M54 14C54 10.6863 56.6863 8 60 8H92V64H54V14Z" fill="white" />
|
||||||
<path d="M36.453 24.7949H33.7446V23.1699H36.453V24.7949Z" fill="var(--td-text-color-primary)"/>
|
<path
|
||||||
<path d="M36.0788 17.5351L37.9936 19.4499L39.1427 18.3009L37.2279 16.3861L36.0788 17.5351Z" fill="var(--td-text-color-primary)"/>
|
d="M73.0001 18.7826C73.6304 18.7826 74.1414 18.2716 74.1414 17.6413C74.1414 17.011 73.6304 16.5 73.0001 16.5C72.3698 16.5 71.8588 17.011 71.8588 17.6413C71.8588 18.2716 72.3698 18.7826 73.0001 18.7826Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M73 20.1522C69.2181 20.1522 66.1522 23.2181 66.1522 27C66.1522 30.7819 69.2181 33.8478 73 33.8478C76.782 33.8478 79.8479 30.7819 79.8479 27C79.8479 23.2181 76.782 20.1522 73 20.1522Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M80.7609 20.3804C80.7609 21.0108 80.25 21.5217 79.6196 21.5217C78.9893 21.5217 78.4783 21.0108 78.4783 20.3804C78.4783 19.7501 78.9893 19.2391 79.6196 19.2391C80.25 19.2391 80.7609 19.7501 80.7609 20.3804Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M82.3588 28.1413C82.9891 28.1413 83.5001 27.6303 83.5001 27C83.5001 26.3697 82.9891 25.8587 82.3588 25.8587C81.7285 25.8587 81.2175 26.3697 81.2175 27C81.2175 27.6303 81.7285 28.1413 82.3588 28.1413Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M80.7609 33.6196C80.7609 34.2499 80.25 34.7609 79.6196 34.7609C78.9893 34.7609 78.4783 34.2499 78.4783 33.6196C78.4783 32.9892 78.9893 32.4783 79.6196 32.4783C80.25 32.4783 80.7609 32.9892 80.7609 33.6196Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M73.0001 37.5C73.6304 37.5 74.1414 36.989 74.1414 36.3587C74.1414 35.7284 73.6304 35.2174 73.0001 35.2174C72.3698 35.2174 71.8588 35.7284 71.8588 36.3587C71.8588 36.989 72.3698 37.5 73.0001 37.5Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M67.5218 33.6196C67.5218 34.2499 67.0108 34.7609 66.3805 34.7609C65.7501 34.7609 65.2392 34.2499 65.2392 33.6196C65.2392 32.9892 65.7501 32.4783 66.3805 32.4783C67.0108 32.4783 67.5218 32.9892 67.5218 33.6196Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M63.6413 28.1413C64.2716 28.1413 64.7826 27.6303 64.7826 27C64.7826 26.3697 64.2716 25.8587 63.6413 25.8587C63.011 25.8587 62.5 26.3697 62.5 27C62.5 27.6303 63.011 28.1413 63.6413 28.1413Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M67.5218 20.3804C67.5218 21.0108 67.0108 21.5217 66.3805 21.5217C65.7501 21.5217 65.2392 21.0108 65.2392 20.3804C65.2392 19.7501 65.7501 19.2391 66.3805 19.2391C67.0108 19.2391 67.5218 19.7501 67.5218 20.3804Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_25494_106056">
|
||||||
|
<rect width="92" height="64" rx="9" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 3.5 KiB |
|
|
@ -1,5 +1,14 @@
|
||||||
<svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="92" height="64" viewBox="0 0 92 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M0 0H88V48H0V0Z" fill="#13161B"/>
|
<g clip-path="url(#clip0_25494_106042)">
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.5327 26.8699C52.0346 26.9554 51.5225 26.9999 51 26.9999C46.0294 26.9999 42 22.9705 42 17.9999C42 16.9964 42.1642 16.0313 42.4673 15.1299C38.2268 15.8574 35 19.5518 35 23.9999C35 28.9705 39.0294 32.9999 44 32.9999C47.9671 32.9999 51.3346 30.4332 52.5327 26.8699Z" fill="#949EAA"/>
|
<rect width="92" height="64" fill="#5E5E5E" />
|
||||||
|
<path d="M8 14C8 10.6863 10.6863 8 14 8H78C81.3137 8 84 10.6863 84 14V64H8V14Z" fill="#242424" />
|
||||||
|
<path
|
||||||
|
d="M27.0001 18.75C22.4437 18.75 18.75 22.4437 18.75 27.0001C18.75 31.5565 22.4437 35.2501 27.0001 35.2501C31.5565 35.2501 35.2501 31.5565 35.2501 27.0001C35.2501 26.4283 35.1919 25.8693 35.0806 25.3291C35.0104 24.9876 34.714 24.7396 34.3655 24.7305C34.017 24.7215 33.7082 24.9537 33.6203 25.2911C33.1695 27.0202 31.5964 28.2955 29.7274 28.2955C27.5056 28.2955 25.7046 26.4945 25.7046 24.2728C25.7046 22.4037 26.98 20.8306 28.7091 20.3798C29.0464 20.2919 29.2787 19.9831 29.2696 19.6346C29.2605 19.2861 29.0125 18.9898 28.671 18.9195C28.1308 18.8083 27.5718 18.75 27.0001 18.75Z"
|
||||||
|
fill="white" />
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_25494_106042">
|
||||||
|
<rect width="92" height="64" rx="9" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 495 B After Width: | Height: | Size: 1.1 KiB |
5
src/assets/assets-setting-icon.svg
Normal file
5
src/assets/assets-setting-icon.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||||
|
d="M12 0.845215L21.6602 6.42257V17.5773L12 23.1546L2.33972 17.5773V6.42257L12 0.845215ZM12 3.15462L4.33972 7.57727V16.4226L12 20.8452L19.6602 16.4226V7.57727L12 3.15462ZM12 8.99992C10.3431 8.99992 8.99998 10.3431 8.99998 11.9999C8.99998 13.6568 10.3431 14.9999 12 14.9999C13.6568 14.9999 15 13.6568 15 11.9999C15 10.3431 13.6568 8.99992 12 8.99992ZM6.99998 11.9999C6.99998 9.23849 9.23855 6.99992 12 6.99992C14.7614 6.99992 17 9.23849 17 11.9999C17 14.7613 14.7614 16.9999 12 16.9999C9.23855 16.9999 6.99998 14.7613 6.99998 11.9999Z"
|
||||||
|
fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 725 B |
|
|
@ -1,13 +1,50 @@
|
||||||
<svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="92" height="64" viewBox="0 0 92 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<rect width="88" height="48" fill="var(--td-component-border)"/>
|
<g clip-path="url(#clip0_25494_106016)">
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.9999 20.583C42.1129 20.583 40.5832 22.1127 40.5832 23.9997C40.5832 25.8867 42.1129 27.4163 43.9999 27.4163C45.8869 27.4163 47.4166 25.8867 47.4166 23.9997C47.4166 22.1127 45.8869 20.583 43.9999 20.583ZM39.0832 23.9997C39.0832 21.2843 41.2845 19.083 43.9999 19.083C46.7153 19.083 48.9166 21.2843 48.9166 23.9997C48.9166 26.7151 46.7153 28.9163 43.9999 28.9163C41.2845 28.9163 39.0832 26.7151 39.0832 23.9997Z" fill="var(--td-text-color-primary)"/>
|
<rect width="92" height="64" fill="#F3F3F3" />
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.2499 17.333V14.833H44.7499V17.333H43.2499Z" fill="var(--td-text-color-primary)"/>
|
<path d="M8 14C8 10.6863 10.6863 8 14 8H78C81.3137 8 84 10.6863 84 14V64H8V14Z" fill="white" />
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.1838 18.7552L49.9513 16.9877L51.0119 18.0483L49.2444 19.8158L48.1838 18.7552Z" fill="var(--td-text-color-primary)"/>
|
<path
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M50.6666 23.2497H53.1666V24.7497H50.6666V23.2497Z" fill="var(--td-text-color-primary)"/>
|
d="M27.0001 18.7826C27.6304 18.7826 28.1414 18.2716 28.1414 17.6413C28.1414 17.011 27.6304 16.5 27.0001 16.5C26.3698 16.5 25.8588 17.011 25.8588 17.6413C25.8588 18.2716 26.3698 18.7826 27.0001 18.7826Z"
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.2444 28.1835L51.0119 29.951L49.9513 31.0117L48.1838 29.2442L49.2444 28.1835Z" fill="var(--td-text-color-primary)"/>
|
fill="#FFBD2E" />
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.7499 30.6663V33.1663H43.2499V30.6663H44.7499Z" fill="var(--td-text-color-primary)"/>
|
<path
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.8162 29.2442L38.0487 31.0117L36.988 29.951L38.7555 28.1835L39.8162 29.2442Z" fill="var(--td-text-color-primary)"/>
|
d="M27 20.1522C23.2181 20.1522 20.1522 23.2181 20.1522 27C20.1522 30.7819 23.2181 33.8478 27 33.8478C30.782 33.8478 33.8479 30.7819 33.8479 27C33.8479 23.2181 30.782 20.1522 27 20.1522Z"
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.3333 24.7497H34.8333V23.2497H37.3333V24.7497Z" fill="var(--td-text-color-primary)"/>
|
fill="#FFBD2E" />
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.7555 19.8158L36.988 18.0483L38.0487 16.9877L39.8162 18.7552L38.7555 19.8158Z" fill="var(--td-text-color-primary)"/>
|
<path
|
||||||
|
d="M34.7609 20.3804C34.7609 21.0108 34.25 21.5217 33.6196 21.5217C32.9893 21.5217 32.4783 21.0108 32.4783 20.3804C32.4783 19.7501 32.9893 19.2391 33.6196 19.2391C34.25 19.2391 34.7609 19.7501 34.7609 20.3804Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M36.3588 28.1413C36.9891 28.1413 37.5001 27.6303 37.5001 27C37.5001 26.3697 36.9891 25.8587 36.3588 25.8587C35.7285 25.8587 35.2175 26.3697 35.2175 27C35.2175 27.6303 35.7285 28.1413 36.3588 28.1413Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M34.7609 33.6196C34.7609 34.2499 34.25 34.7609 33.6196 34.7609C32.9893 34.7609 32.4783 34.2499 32.4783 33.6196C32.4783 32.9892 32.9893 32.4783 33.6196 32.4783C34.25 32.4783 34.7609 32.9892 34.7609 33.6196Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M27.0001 37.5C27.6304 37.5 28.1414 36.989 28.1414 36.3587C28.1414 35.7284 27.6304 35.2174 27.0001 35.2174C26.3698 35.2174 25.8588 35.7284 25.8588 36.3587C25.8588 36.989 26.3698 37.5 27.0001 37.5Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M21.5218 33.6196C21.5218 34.2499 21.0108 34.7609 20.3805 34.7609C19.7501 34.7609 19.2392 34.2499 19.2392 33.6196C19.2392 32.9892 19.7501 32.4783 20.3805 32.4783C21.0108 32.4783 21.5218 32.9892 21.5218 33.6196Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M17.6413 28.1413C18.2716 28.1413 18.7826 27.6303 18.7826 27C18.7826 26.3697 18.2716 25.8587 17.6413 25.8587C17.011 25.8587 16.5 26.3697 16.5 27C16.5 27.6303 17.011 28.1413 17.6413 28.1413Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
<path
|
||||||
|
d="M21.5218 20.3804C21.5218 21.0108 21.0108 21.5217 20.3805 21.5217C19.7501 21.5217 19.2392 21.0108 19.2392 20.3804C19.2392 19.7501 19.7501 19.2391 20.3805 19.2391C21.0108 19.2391 21.5218 19.7501 21.5218 20.3804Z"
|
||||||
|
fill="#FFBD2E" />
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_25494_106016" x="67.0146" y="41.9644" width="18.9705" height="14.0208"
|
||||||
|
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||||
|
result="hardAlpha" />
|
||||||
|
<feOffset dy="1" />
|
||||||
|
<feGaussianBlur stdDeviation="0.5" />
|
||||||
|
<feComposite in2="hardAlpha" operator="out" />
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" />
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_25494_106016" />
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_25494_106016" result="shape" />
|
||||||
|
</filter>
|
||||||
|
<clipPath id="clip0_25494_106016">
|
||||||
|
<rect width="92" height="64" rx="9" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 3.6 KiB |
|
|
@ -52,11 +52,6 @@
|
||||||
<template #suffix><t-icon name="chevron-down" /></template>
|
<template #suffix><t-icon name="chevron-down" /></template>
|
||||||
</t-button>
|
</t-button>
|
||||||
</t-dropdown>
|
</t-dropdown>
|
||||||
<t-tooltip placement="bottom" content="系统设置">
|
|
||||||
<t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
|
|
||||||
<t-icon name="setting" />
|
|
||||||
</t-button>
|
|
||||||
</t-tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</t-head-menu>
|
</t-head-menu>
|
||||||
|
|
@ -113,12 +108,6 @@ const router = useRouter();
|
||||||
const settingStore = useSettingStore();
|
const settingStore = useSettingStore();
|
||||||
const user = useUserStore();
|
const user = useUserStore();
|
||||||
|
|
||||||
const toggleSettingPanel = () => {
|
|
||||||
settingStore.updateConfig({
|
|
||||||
showSettingPanel: true,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const active = computed(() => getActive());
|
const active = computed(() => getActive());
|
||||||
|
|
||||||
const layoutCls = computed(() => [`${prefix}-header-layout`]);
|
const layoutCls = computed(() => [`${prefix}-header-layout`]);
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,6 @@
|
||||||
</t-layout>
|
</t-layout>
|
||||||
</t-layout>
|
</t-layout>
|
||||||
</template>
|
</template>
|
||||||
<setting-com />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -36,7 +35,6 @@ import { useSettingStore, useTabsRouterStore } from '@/store';
|
||||||
import LayoutContent from './components/LayoutContent.vue';
|
import LayoutContent from './components/LayoutContent.vue';
|
||||||
import LayoutHeader from './components/LayoutHeader.vue';
|
import LayoutHeader from './components/LayoutHeader.vue';
|
||||||
import LayoutSideNav from './components/LayoutSideNav.vue';
|
import LayoutSideNav from './components/LayoutSideNav.vue';
|
||||||
import SettingCom from './setting.vue';
|
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const settingStore = useSettingStore();
|
const settingStore = useSettingStore();
|
||||||
|
|
|
||||||
|
|
@ -1,346 +0,0 @@
|
||||||
<template>
|
|
||||||
<t-drawer
|
|
||||||
v-model:visible="showSettingPanel"
|
|
||||||
size="408px"
|
|
||||||
:footer="false"
|
|
||||||
header="页面配置"
|
|
||||||
:close-btn="true"
|
|
||||||
class="setting-drawer-container"
|
|
||||||
@close-btn-click="handleCloseDrawer"
|
|
||||||
>
|
|
||||||
<div class="setting-container">
|
|
||||||
<t-form ref="form" :data="formData" label-align="left">
|
|
||||||
<div class="setting-group-title">主题模式</div>
|
|
||||||
<t-radio-group v-model="formData.mode">
|
|
||||||
<div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer">
|
|
||||||
<div>
|
|
||||||
<t-radio-button :key="index" :value="item.type"
|
|
||||||
><component :is="getModeIcon(item.type)"
|
|
||||||
/></t-radio-button>
|
|
||||||
<p :style="{ textAlign: 'center', marginTop: '8px' }">{{ item.text }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</t-radio-group>
|
|
||||||
<div class="setting-group-title">主题色</div>
|
|
||||||
<t-radio-group v-model="formData.brandTheme">
|
|
||||||
<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">
|
|
||||||
<color-container :value="item" />
|
|
||||||
</t-radio-button>
|
|
||||||
</div>
|
|
||||||
<div class="setting-layout-drawer">
|
|
||||||
<t-popup
|
|
||||||
destroy-on-close
|
|
||||||
expand-animation
|
|
||||||
placement="bottom-right"
|
|
||||||
trigger="click"
|
|
||||||
:visible="isColoPickerDisplay"
|
|
||||||
:overlay-style="{ padding: 0 }"
|
|
||||||
@visible-change="onPopupVisibleChange"
|
|
||||||
>
|
|
||||||
<template #content>
|
|
||||||
<t-color-picker-panel
|
|
||||||
:on-change="changeColor"
|
|
||||||
:color-modes="['monochrome']"
|
|
||||||
format="HEX"
|
|
||||||
:swatch-colors="[]"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<t-radio-button :value="dynamicColor" class="setting-layout-color-group dynamic-color-btn">
|
|
||||||
<color-container :value="dynamicColor" />
|
|
||||||
</t-radio-button>
|
|
||||||
</t-popup>
|
|
||||||
</div>
|
|
||||||
</t-radio-group>
|
|
||||||
|
|
||||||
<div class="setting-group-title">导航布局</div>
|
|
||||||
<t-radio-group v-model="formData.layout">
|
|
||||||
<div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer">
|
|
||||||
<t-radio-button :key="index" :value="item">
|
|
||||||
<thumbnail :src="getThumbnailUrl(item)" />
|
|
||||||
</t-radio-button>
|
|
||||||
</div>
|
|
||||||
</t-radio-group>
|
|
||||||
|
|
||||||
<t-form-item v-show="formData.layout === 'mix'" label="分割菜单（混合模式下有效）" name="splitMenu">
|
|
||||||
<t-switch v-model="formData.splitMenu" />
|
|
||||||
</t-form-item>
|
|
||||||
|
|
||||||
<t-form-item v-show="formData.layout === 'mix'" label="固定 Sidebar" name="isSidebarFixed">
|
|
||||||
<t-switch v-model="formData.isSidebarFixed" />
|
|
||||||
</t-form-item>
|
|
||||||
|
|
||||||
<div class="setting-group-title">元素开关</div>
|
|
||||||
<t-form-item v-show="formData.layout === 'side'" label="显示 Header" name="showHeader">
|
|
||||||
<t-switch v-model="formData.showHeader" />
|
|
||||||
</t-form-item>
|
|
||||||
<t-form-item label="显示 Breadcrumbs" name="showBreadcrumb">
|
|
||||||
<t-switch v-model="formData.showBreadcrumb" />
|
|
||||||
</t-form-item>
|
|
||||||
<t-form-item label="显示 Footer" name="showFooter">
|
|
||||||
<t-switch v-model="formData.showFooter" />
|
|
||||||
</t-form-item>
|
|
||||||
<t-form-item label="使用 多标签Tab页" name="isUseTabsRouter">
|
|
||||||
<t-switch v-model="formData.isUseTabsRouter"></t-switch>
|
|
||||||
</t-form-item>
|
|
||||||
</t-form>
|
|
||||||
<div class="setting-info">
|
|
||||||
<p>请复制后手动修改配置文件: /src/config/style.ts</p>
|
|
||||||
<t-button theme="primary" variant="text" @click="handleCopy"> 复制配置项 </t-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</t-drawer>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { PopupVisibleChangeContext } from 'tdesign-vue-next';
|
|
||||||
import { MessagePlugin } from 'tdesign-vue-next';
|
|
||||||
import { computed, onMounted, ref, watchEffect } from 'vue';
|
|
||||||
import useClipboard from 'vue-clipboard3';
|
|
||||||
|
|
||||||
import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
|
|
||||||
import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
|
|
||||||
import SettingLightIcon from '@/assets/assets-setting-light.svg';
|
|
||||||
import ColorContainer from '@/components/color/index.vue';
|
|
||||||
import Thumbnail from '@/components/thumbnail/index.vue';
|
|
||||||
import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
|
|
||||||
import STYLE_CONFIG from '@/config/style';
|
|
||||||
import { useSettingStore } from '@/store';
|
|
||||||
|
|
||||||
const settingStore = useSettingStore();
|
|
||||||
|
|
||||||
const LAYOUT_OPTION = ['side', 'top', 'mix'];
|
|
||||||
|
|
||||||
const MODE_OPTIONS = [
|
|
||||||
{ type: 'light', text: '明亮' },
|
|
||||||
{ 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];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return styleConfig;
|
|
||||||
};
|
|
||||||
|
|
||||||
const dynamicColor = computed(() => {
|
|
||||||
const isDynamic = DEFAULT_COLOR_OPTIONS.indexOf(formData.value.brandTheme) === -1;
|
|
||||||
return isDynamic ? formData.value.brandTheme : '';
|
|
||||||
});
|
|
||||||
const formData = ref({ ...initStyleConfig() });
|
|
||||||
const isColoPickerDisplay = ref(false);
|
|
||||||
|
|
||||||
const showSettingPanel = computed({
|
|
||||||
get() {
|
|
||||||
return settingStore.showSettingPanel;
|
|
||||||
},
|
|
||||||
set(newVal: boolean) {
|
|
||||||
settingStore.updateConfig({
|
|
||||||
showSettingPanel: newVal,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const changeColor = (hex: string) => {
|
|
||||||
formData.value.brandTheme = hex;
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
document.querySelector('.dynamic-color-btn').addEventListener('click', () => {
|
|
||||||
isColoPickerDisplay.value = true;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const onPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
|
|
||||||
if (!visible && context.trigger === 'document') {
|
|
||||||
isColoPickerDisplay.value = visible;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCopy = () => {
|
|
||||||
const text = JSON.stringify(formData.value, null, 4);
|
|
||||||
const { toClipboard } = useClipboard();
|
|
||||||
toClipboard(text)
|
|
||||||
.then(() => {
|
|
||||||
MessagePlugin.closeAll();
|
|
||||||
MessagePlugin.success('复制成功');
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
MessagePlugin.closeAll();
|
|
||||||
MessagePlugin.error('复制失败');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const getModeIcon = (mode: string) => {
|
|
||||||
if (mode === 'light') {
|
|
||||||
return SettingLightIcon;
|
|
||||||
}
|
|
||||||
if (mode === 'dark') {
|
|
||||||
return SettingDarkIcon;
|
|
||||||
}
|
|
||||||
return SettingAutoIcon;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCloseDrawer = () => {
|
|
||||||
settingStore.updateConfig({
|
|
||||||
showSettingPanel: false,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const getThumbnailUrl = (name: string): string => {
|
|
||||||
return `https://tdesign.gtimg.com/tdesign-pro/setting/${name}.png`;
|
|
||||||
};
|
|
||||||
|
|
||||||
watchEffect(() => {
|
|
||||||
if (formData.value.brandTheme) settingStore.updateConfig(formData.value);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<!-- teleport导致drawer 内 scoped样式问题无法生效 先规避下 -->
|
|
||||||
<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
|
|
||||||
<style lang="less">
|
|
||||||
.tdesign-setting {
|
|
||||||
z-index: 100;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 200px;
|
|
||||||
right: 0;
|
|
||||||
transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), visibility 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
border-radius: 20px 0 0 20px;
|
|
||||||
transition: all 0.3s;
|
|
||||||
|
|
||||||
.t-icon {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tdesign-setting-text {
|
|
||||||
font-size: 12px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
width: 96px;
|
|
||||||
|
|
||||||
.tdesign-setting-text {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-layout-color-group {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 50% !important;
|
|
||||||
padding: 6px !important;
|
|
||||||
border: 2px solid transparent !important;
|
|
||||||
|
|
||||||
> .t-radio-button__label {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tdesign-setting-close {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 200px;
|
|
||||||
right: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-group-title {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 22px;
|
|
||||||
margin: 32px 0 24px 0;
|
|
||||||
text-align: left;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--td-text-color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-link {
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--td-brand-color);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-info {
|
|
||||||
position: absolute;
|
|
||||||
padding: 24px;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--td-text-color-placeholder);
|
|
||||||
width: 100%;
|
|
||||||
background: var(--td-bg-color-container);
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-drawer-container {
|
|
||||||
.setting-container {
|
|
||||||
padding-bottom: 100px;
|
|
||||||
}
|
|
||||||
.t-radio-group.t-size-m {
|
|
||||||
min-height: 32px;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-radio-group.t-size-m .t-radio-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-layout-drawer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
.t-radio-button {
|
|
||||||
display: inline-flex;
|
|
||||||
max-height: 78px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: var(--td-radius-default);
|
|
||||||
border: 2px solid var(--td-component-border);
|
|
||||||
> .t-radio-button__label {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-is-checked {
|
|
||||||
border: 2px solid var(--td-brand-color) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-form__controls-content {
|
|
||||||
justify-content: end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-form__controls-content {
|
|
||||||
justify-content: end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-route-theme {
|
|
||||||
.t-form__label {
|
|
||||||
min-width: 310px !important;
|
|
||||||
color: var(--td-text-color-secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-color-theme {
|
|
||||||
.setting-layout-drawer {
|
|
||||||
.t-radio-button {
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
27
src/layouts/setting/index.vue
Normal file
27
src/layouts/setting/index.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 页面配置 -->
|
||||||
|
<page-config />
|
||||||
|
<!-- 主题皮肤配置 -->
|
||||||
|
<td-theme-generator :props-top="0" :show-setting="true" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
|
||||||
|
import { useSettingStore } from '@/store';
|
||||||
|
|
||||||
|
import PageConfig from './page-config.vue';
|
||||||
|
|
||||||
|
const settingStore = useSettingStore();
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const themeGenerator = document.querySelector('td-theme-generator');
|
||||||
|
themeGenerator.addEventListener('click-setting', () => {
|
||||||
|
settingStore.showSettingPanel = true;
|
||||||
|
});
|
||||||
|
themeGenerator.addEventListener('panel-drawer-visible', (v: CustomEvent) => {
|
||||||
|
if (v?.detail?.[0]) settingStore.showSettingPanel = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
274
src/layouts/setting/page-config.vue
Normal file
274
src/layouts/setting/page-config.vue
Normal file
|
|
@ -0,0 +1,274 @@
|
||||||
|
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
|
||||||
|
<template>
|
||||||
|
<t-drawer
|
||||||
|
v-model:visible="showSettingPanel"
|
||||||
|
size="348px"
|
||||||
|
:footer="false"
|
||||||
|
:header="false"
|
||||||
|
:close-btn="false"
|
||||||
|
class="setting-drawer-container"
|
||||||
|
@close-btn-click="handleCloseDrawer"
|
||||||
|
>
|
||||||
|
<div class="setting-container">
|
||||||
|
<t-form ref="form" :data="formData" label-align="left">
|
||||||
|
<!-- 主题模式 -->
|
||||||
|
<div class="setting-container-subgroup">
|
||||||
|
<div class="setting-group-title">主题模式</div>
|
||||||
|
<t-radio-group v-model="formData.mode">
|
||||||
|
<div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer">
|
||||||
|
<div>
|
||||||
|
<t-radio-button :key="index" :value="item.type">
|
||||||
|
<component :is="getModeIcon(item.type)" class="mode-img" />
|
||||||
|
<picked-icon v-if="formData.mode === item.type" class="picked" />
|
||||||
|
</t-radio-button>
|
||||||
|
<p :style="{ textAlign: 'center', marginTop: '8px' }">{{ item.text }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</t-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting-container-subgroup">
|
||||||
|
<div class="setting-group-title">导航布局</div>
|
||||||
|
<t-radio-group v-model="formData.layout">
|
||||||
|
<div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer">
|
||||||
|
<t-radio-button :key="index" :value="item">
|
||||||
|
<component :is="getLayoutIcon(item)" class="layout-img" />
|
||||||
|
<picked-icon v-if="formData.layout === item" class="picked" />
|
||||||
|
</t-radio-button>
|
||||||
|
</div>
|
||||||
|
</t-radio-group>
|
||||||
|
<div v-show="formData.layout === 'mix'" :class="['setting-container-subgroup', 'setting-config-list']">
|
||||||
|
<t-form-item label="分割菜单（混合模式下有效）" name="splitMenu">
|
||||||
|
<t-switch v-model="formData.splitMenu" />
|
||||||
|
</t-form-item>
|
||||||
|
|
||||||
|
<t-form-item label="固定 Sidebar" name="isSidebarFixed">
|
||||||
|
<t-switch v-model="formData.isSidebarFixed" />
|
||||||
|
</t-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-group-title">元素开关</div>
|
||||||
|
<div :class="['setting-container-subgroup', 'setting-config-list']">
|
||||||
|
<t-form-item v-show="formData.layout === 'side'" label="显示 Header" name="showHeader">
|
||||||
|
<t-switch v-model="formData.showHeader" />
|
||||||
|
</t-form-item>
|
||||||
|
<t-form-item label="显示 Breadcrumbs" name="showBreadcrumb">
|
||||||
|
<t-switch v-model="formData.showBreadcrumb" />
|
||||||
|
</t-form-item>
|
||||||
|
<t-form-item label="显示 Footer" name="showFooter">
|
||||||
|
<t-switch v-model="formData.showFooter" />
|
||||||
|
</t-form-item>
|
||||||
|
<t-form-item label="使用 多标签Tab页" name="isUseTabsRouter">
|
||||||
|
<t-switch v-model="formData.isUseTabsRouter"></t-switch>
|
||||||
|
</t-form-item>
|
||||||
|
</div>
|
||||||
|
</t-form>
|
||||||
|
<div class="setting-info">
|
||||||
|
<p>请复制后手动修改配置文件: /src/config/style.ts</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</t-drawer>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, ref, watchEffect } from 'vue';
|
||||||
|
|
||||||
|
import LayoutMixIcon from '@/assets/assets-layout-mix.svg';
|
||||||
|
import LayoutSideIcon from '@/assets/assets-layout-side.svg';
|
||||||
|
import LayoutTopIcon from '@/assets/assets-layout-top.svg';
|
||||||
|
import PickedIcon from '@/assets/assets-picked.svg';
|
||||||
|
import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
|
||||||
|
import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
|
||||||
|
import SettingLightIcon from '@/assets/assets-setting-light.svg';
|
||||||
|
import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
|
||||||
|
import STYLE_CONFIG from '@/config/style';
|
||||||
|
import { useSettingStore } from '@/store';
|
||||||
|
|
||||||
|
const settingStore = useSettingStore();
|
||||||
|
|
||||||
|
const LAYOUT_OPTION = ['side', 'top', 'mix'];
|
||||||
|
|
||||||
|
const MODE_OPTIONS = [
|
||||||
|
{ type: 'light', text: '明亮' },
|
||||||
|
{ 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];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return styleConfig;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formData = ref({ ...initStyleConfig() });
|
||||||
|
|
||||||
|
const showSettingPanel = computed({
|
||||||
|
get() {
|
||||||
|
return settingStore.showSettingPanel;
|
||||||
|
},
|
||||||
|
set(newVal: boolean) {
|
||||||
|
settingStore.updateConfig({
|
||||||
|
showSettingPanel: newVal,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const getModeIcon = (mode: string) => {
|
||||||
|
const modeIconMap = {
|
||||||
|
light: SettingLightIcon,
|
||||||
|
dark: SettingDarkIcon,
|
||||||
|
auto: SettingAutoIcon,
|
||||||
|
};
|
||||||
|
return modeIconMap[mode];
|
||||||
|
};
|
||||||
|
|
||||||
|
const getLayoutIcon = (mode: string) => {
|
||||||
|
const layoutIconMap = {
|
||||||
|
side: LayoutSideIcon,
|
||||||
|
top: LayoutTopIcon,
|
||||||
|
mix: LayoutMixIcon,
|
||||||
|
};
|
||||||
|
return layoutIconMap[mode];
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseDrawer = () => {
|
||||||
|
settingStore.updateConfig({
|
||||||
|
showSettingPanel: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
if (formData.value.brandTheme) settingStore.updateConfig(formData.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 若需要在页面配置中插入轻量主题色配置 可以启用这部分代码
|
||||||
|
const isColoPickerDisplay = ref(false);
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
|
||||||
|
const changeColor = (hex: string) => {
|
||||||
|
formData.value.brandTheme = hex;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
document.querySelector('.dynamic-color-btn')?.addEventListener('click', () => {
|
||||||
|
isColoPickerDisplay.value = true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
|
||||||
|
const dynamicColor = computed(() => {
|
||||||
|
const isDynamic = DEFAULT_COLOR_OPTIONS.indexOf(formData.value.brandTheme) === -1;
|
||||||
|
return isDynamic ? formData.value.brandTheme : '';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- teleport导致drawer 内 scoped样式问题无法生效 先规避下 -->
|
||||||
|
<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
|
||||||
|
<style lang="less">
|
||||||
|
.setting-drawer-container {
|
||||||
|
.t-drawer__body {
|
||||||
|
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
|
||||||
|
background-color: var(--td-bg-color-secondarycontainer);
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-radio-group.t-size-m {
|
||||||
|
min-height: 32px;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-radio-group {
|
||||||
|
margin: var(--td-comp-margin-m) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-radio-group.t-size-m .t-radio-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-container {
|
||||||
|
background-color: var(--td-bg-color-container);
|
||||||
|
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
|
||||||
|
border-radius: var(--td-radius-extraLarge);
|
||||||
|
height: 100%;
|
||||||
|
&-subgroup {
|
||||||
|
margin: var(--td-comp-margin-m) 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-config-list {
|
||||||
|
background-color: var(--td-bg-color-secondarycontainer);
|
||||||
|
border-radius: var(--td-radius-large);
|
||||||
|
padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-xs);
|
||||||
|
> .t-form__item {
|
||||||
|
background-color: var(--td-bg-color-container);
|
||||||
|
margin-bottom: var(--td-comp-margin-xs);
|
||||||
|
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-m);
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.setting-group-title {
|
||||||
|
text-align: left;
|
||||||
|
font: var(--td-font-title-medium);
|
||||||
|
color: var(--td-text-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-layout-drawer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.t-radio-button {
|
||||||
|
display: inline-flex;
|
||||||
|
max-height: 78px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: var(--td-radius-default);
|
||||||
|
border: none;
|
||||||
|
> .t-radio-button__label {
|
||||||
|
display: inline-flex;
|
||||||
|
position: relative;
|
||||||
|
.mode-img,
|
||||||
|
.layout-img {
|
||||||
|
border-radius: 9px;
|
||||||
|
}
|
||||||
|
.picked {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-is-checked {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-form__controls-content {
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-form__controls-content {
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-info {
|
||||||
|
position: absolute;
|
||||||
|
padding: 24px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--td-text-color-placeholder);
|
||||||
|
width: 100%;
|
||||||
|
background: var(--td-bg-color-container);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -10,6 +10,8 @@ import 'tdesign-vue-next/es/style/index.css';
|
||||||
import '@/style/index.less';
|
import '@/style/index.less';
|
||||||
import './permission';
|
import './permission';
|
||||||
|
|
||||||
|
import 'tdesign-theme-generator';
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
app.use(TDesign);
|
app.use(TDesign);
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
|
|
||||||
<login v-if="type === 'login'" />
|
<login v-if="type === 'login'" />
|
||||||
<register v-else @register-success="switchType('login')" />
|
<register v-else @register-success="switchType('login')" />
|
||||||
<tdesign-setting />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
|
<footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
|
||||||
|
|
@ -30,8 +29,6 @@ export default {
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
import TdesignSetting from '@/layouts/setting.vue';
|
|
||||||
|
|
||||||
import LoginHeader from './components/Header.vue';
|
import LoginHeader from './components/Header.vue';
|
||||||
import Login from './components/Login.vue';
|
import Login from './components/Login.vue';
|
||||||
import Register from './components/Register.vue';
|
import Register from './components/Register.vue';
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,9 @@ import { generateColorMap, insertThemeStylesheet } from '@/utils/color';
|
||||||
const state = {
|
const state = {
|
||||||
...STYLE_CONFIG,
|
...STYLE_CONFIG,
|
||||||
showSettingPanel: false,
|
showSettingPanel: false,
|
||||||
colorList: {},
|
showGeneratorDrawer: false,
|
||||||
chartColors: LIGHT_CHART_COLORS,
|
chartColors: LIGHT_CHART_COLORS,
|
||||||
|
colorList: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
export type TState = typeof state;
|
export type TState = typeof state;
|
||||||
|
|
@ -52,6 +53,8 @@ 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) {
|
||||||
|
if (document.querySelector('td-theme-generator')) return; // 项目中若使用了主题插件 则不让主题色在页面配置中使用
|
||||||
|
|
||||||
const mode = this.displayMode;
|
const mode = this.displayMode;
|
||||||
// 以主题色加显示模式作为键
|
// 以主题色加显示模式作为键
|
||||||
const colorKey = `${brandTheme}[${mode}]`;
|
const colorKey = `${brandTheme}[${mode}]`;
|
||||||
|
|
|
||||||
1370
src/style/themes/tcloud.css
Normal file
1370
src/style/themes/tcloud.css
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user