Skip to content

Commit 4fe6e08

Browse files
RylanBotRylanBot
authoredMar 11, 2025
chore: move theme from session to local storage (#593)
* chore: downgrade `eslint-plugin-prettier` to support `prettier` * chore: move theme from session to local storage
1 parent f49163d commit 4fe6e08

File tree

5 files changed

+48
-56
lines changed

5 files changed

+48
-56
lines changed
 

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"eslint-config-prettier": "^9.0.0",
2727
"eslint-config-recommended": "^4.1.0",
2828
"eslint-plugin-html": "^7.1.0",
29-
"eslint-plugin-prettier": "^5.0.0",
29+
"eslint-plugin-prettier": "^4.2.1",
3030
"husky": "^8.0.0",
3131
"lint-staged": "8.1.5",
3232
"prettier": "^2.8.8",

‎packages/components/src/components/td-doc-demo/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,18 @@ export default define({
1818
languages: undefined, // multiple languages display
1919
currentRenderCode: '',
2020
theme: {
21-
get: (host, lastValue) => lastValue || sessionStorage.getItem('--tdesign-theme') || 'light',
21+
get: (host, lastValue) => lastValue || localStorage.getItem('--tdesign-theme') || 'light',
2222
set: (host, value) => value,
2323
connect(host, key, invalidate) {
2424
function themeChange() {
25-
const theme = sessionStorage.getItem('--tdesign-theme');
25+
const theme = localStorage.getItem('--tdesign-theme');
2626
Object.assign(host, { [key]: theme });
2727
invalidate();
2828
}
2929

30-
window.addEventListener('storageChange', themeChange);
30+
window.addEventListener('localStorage', themeChange);
3131

32-
return () => window.removeEventListener('storageChange', themeChange);
32+
return () => window.removeEventListener('localStorage', themeChange);
3333
},
3434
},
3535
activeStyleMap: {

‎packages/components/src/components/td-doc-header/index.js

+33-21
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ function iframeOnload(host) {
2727
const iframeEl = host.shadowRoot.getElementById('__iframe__');
2828
clearTimeout(timer);
2929
timer = setTimeout(() => {
30-
iframeEl && (iframeEl.style = `
30+
iframeEl &&
31+
(iframeEl.style = `
3132
max-height: 280px;
3233
transition: max-height .25s .2s var(--anim-time-fn-easing);
3334
-webkit-transition: max-height .25s .2s var(--anim-time-fn-easing);
@@ -47,7 +48,7 @@ export default define({
4748
},
4849
observe: (host) => {
4950
clearTimeout(observeTimer);
50-
const themeMode = document.documentElement.getAttribute('theme-mode') || 'light';
51+
const themeMode = localStorage.getItem('--tdesign-theme') || 'light';
5152
observeTimer = setTimeout(() => {
5253
handleModeChange(themeMode, host);
5354
}, 600);
@@ -65,7 +66,7 @@ export default define({
6566
titleElement.id = '__td_doc_title__';
6667
titleElement.innerText = value.title;
6768
host.appendChild(titleElement);
68-
}
69+
},
6970
},
7071
fixedTitle: {
7172
get: (_host, lastValue) => lastValue || undefined,
@@ -90,28 +91,40 @@ export default define({
9091
if (scrollTop >= 228) {
9192
if (title.style.position !== 'fixed') {
9293
Object.assign(title.style, {
93-
position: 'fixed', top: tabs ? '16px' : '28px', fontSize: '24px', lineHeight: '32px', opacity: 1, visibility: 'visible',
94+
position: 'fixed',
95+
top: tabs ? '16px' : '28px',
96+
fontSize: '24px',
97+
lineHeight: '32px',
98+
opacity: 1,
99+
visibility: 'visible',
94100
});
95101
Object.assign(background.style, { position: 'fixed', top: '0', left: asideWidth });
96-
tabs && Object.assign(tabs.style, {
97-
position: 'fixed', top: '64px', zIndex: 500,
98-
});
102+
tabs &&
103+
Object.assign(tabs.style, {
104+
position: 'fixed',
105+
top: '64px',
106+
zIndex: 500,
107+
});
99108
Object.assign(issue.style, { position: 'fixed', top: '24px', right: '24px' });
100109
}
101110
} else if (scrollTop > 192 && scrollTop < 228) {
102111
if (title.style.visibility !== 'hidden') {
103112
Object.assign(title.style, { opacity: 0, visibility: 'hidden' });
104113
Object.assign(thumb.style, { opacity: 0, visibility: 'hidden' });
105114
Object.assign(describe.style, { opacity: 0, visibility: 'hidden' });
106-
115+
107116
Object.assign(background.style, { position: 'absolute', top: 'unset', left: '0' });
108117
tabs && Object.assign(tabs.style, { position: 'absolute', top: '228px' });
109118
Object.assign(issue.style, { position: 'absolute', top: 'calc(100% - 48px - 12px)' });
110119
}
111120
} else {
112121
if (title.style.position === 'fixed' || title.style.visibility === 'hidden') {
113122
Object.assign(title.style, {
114-
position: 'unset', fontSize: '48px', lineHeight: '56px', opacity: 1, visibility: 'visible',
123+
position: 'unset',
124+
fontSize: '48px',
125+
lineHeight: '56px',
126+
opacity: 1,
127+
visibility: 'visible',
115128
});
116129
Object.assign(describe.style, { opacity: 1, visibility: 'visible' });
117130
Object.assign(background.style, { position: 'absolute', top: 'unset', left: '0' });
@@ -133,25 +146,24 @@ export default define({
133146
const splineUrl = splineConfig[spline];
134147

135148
return html`
136-
${splineUrl ? html`
137-
<iframe id="__iframe__"
138-
class="TDesign-doc-header__thumb"
139-
onload="${iframeOnload}"
140-
></iframe>` : html``
141-
}
149+
${splineUrl
150+
? html` <iframe id="__iframe__" class="TDesign-doc-header__thumb" onload="${iframeOnload}"></iframe>`
151+
: html``}
142152
<div class="TDesign-doc-header" style="${mobileBodyStyle}">
143153
<div class="TDesign-doc-header__inner">
144154
<div class="TDesign-doc-header__badge">
145155
<slot name="badge"></slot>
146156
</div>
147157
<div class="TDesign-doc-header__content">
148158
<div class="TDesign-doc-header__info">
149-
${docInfo ? html`
150-
<h1 class="TDesign-doc-header__info-title">${docInfo.title}</h1>
151-
<div class="TDesign-doc-header__info-describe">
152-
<div innerHTML="${docInfo.desc}"></div>
153-
</div>
154-
` : html``}
159+
${docInfo
160+
? html`
161+
<h1 class="TDesign-doc-header__info-title">${docInfo.title}</h1>
162+
<div class="TDesign-doc-header__info-describe">
163+
<div innerHTML="${docInfo.desc}"></div>
164+
</div>
165+
`
166+
: html``}
155167
</div>
156168
</div>
157169
</div>

‎packages/components/src/components/td-theme-tabs/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,14 @@ export default define({
4848
get: (_host, lastValue) => lastValue || 'light',
4949
set: (_host, value) => {
5050
if (value) {
51-
sessionStorage.setItem('--tdesign-theme', value);
51+
localStorage.setItem('--tdesign-theme', value);
5252
window.dispatchEvent(storageChangeEvent);
5353
}
5454

5555
return value;
5656
},
5757
connect: (host, key, invalidate) => {
58-
const lastTheme = sessionStorage.getItem('--tdesign-theme');
58+
const lastTheme = localStorage.getItem('--tdesign-theme');
5959

6060
if (lastTheme) {
6161
document.documentElement.removeAttribute('theme-mode');

‎pnpm-lock.yaml

+8-28
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)