pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7f5756671d461cf064999c7bd3cf676dc449b36c
im_webapp/umd/src_views_wallpapers_jsx.dev.js
T
Your NameandClaude Sonnet 5 4e8f45d7d8 路由从 hash 换成 History API（pushState/replaceState/popstate），不再依赖 location.hash 
HashNavigation 改名 Navigation（src/lib/navigation.js），接口不变，内部改用真实路径：
parseUrlHash/composeUrlHash 改名 parseUrl/composeUrl；navigateTo/navigateReplace 改调
pushState/replaceState 后手动派发 popstate（pushState/replaceState 不会像赋值 location.hash
那样自动触发事件，这里复用 navigateReplace 早就在用的同一个手动 dispatch 手法）；goBack()
不用改，history.back() 本来就是真实浏览器历史机制。新增 Navigation.currentUrl() 替代调用方
原本直接读的 window.location.hash（这个类从来没包装过这个读取）。

一处需要专门处理的边界情况：当 path[0] 是空字符串（"不选中侧栏视图、只开一个会话"这个仓库里
的合法状态）时，拼出的真实路径开头会变成双斜杠，被浏览器当协议相对地址解析、试图跳到一个叫
会话id的host，pushState 直接抛 SecurityError。composeUrl/parseUrl 内部用占位 token "_" 处理
这种情况，对外的调用方（19个文件）完全无感。

tinode-web.jsx 的 handleHashRoute 改名 handleRouteChange，监听从 hashchange 换成 popstate；
service-worker.js 的推送通知点击跳转手动改写成同样的路径格式（这个文件在打包之外单独执行，
没法 import Navigation）。index.html/index-dev.html 加了 <base href="/">——所有静态资源引用
都是相对路径，hash 路由下页面路径永远是 /，换真实路径后深层地址刷新会按当前目录解析出错误
资源地址导致白屏，这一行是标准修法。nginx.conf 的 try_files 兜底规则本来就适用两种路由，只
更新了注释。

实机验证：地址栏不再有 #；点击会话/设置等各类视图正常跳转；浏览器前进后退和应用内"返回"
按钮都正常；收藏页内部的类型 tab 切换（navigateReplace）确认不产生新的历史记录；在会话页/
个人中心页刷新、直接用完整深层路径打开新标签页都能正确恢复到位，资源正常加载不白屏。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-07 21:00:39 +08:00

213 lines
11 KiB
JavaScript
Raw Blame History

"use strict";
(self["webpackChunktinode_webapp"] = self["webpackChunktinode_webapp"] || []).push([["src_views_wallpapers_jsx"],{
/***/ "./src/views/wallpapers.jsx":
/*!**********************************!*\
!*** ./src/views/wallpapers.jsx ***!
\**********************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": function() { return /* binding */ WallpapersView; }
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-intl */ "react-intl");
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _lib_navigation_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../lib/navigation.js */ "./src/lib/navigation.js");
/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
/* harmony import */ var _lib_utils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../lib/utils.js */ "./src/lib/utils.js");
/* harmony import */ var _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../img/bkg/index.json */ "./img/bkg/index.json");
/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-dev-runtime */ "./node_modules/react/jsx-dev-runtime.js");
class WallpapersView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
constructor(props) {
super(props);
const type = (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_4__.wallpaperTypeFromUrl)(this.props.wallpaper);
const name = (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_4__.wallpaperNameFromUrl)(this.props.wallpaper);
this.state = {
tab: type || _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type,
selectedType: type || _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type,
wallpaper: name || _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_5__[_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type][_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.index].name,
blur: this.props.wallpaperBlur | 0
};
this.blurValues = [0, 1, 2, 4, 8, 16];
this.handleTabClick = this.handleTabClick.bind(this);
this.handleWallpaperSelected = this.handleWallpaperSelected.bind(this);
this.handleBlurChanged = this.handleBlurChanged.bind(this);
this.hasChanged = this.hasChanged.bind(this);
}
handleTabClick(e) {
e.preventDefault();
_lib_navigation_js__WEBPACK_IMPORTED_MODULE_2__["default"].navigateReplace(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_2__["default"].addUrlParam(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_2__["default"].currentUrl(), 'tab', e.currentTarget.dataset.id));
this.setState({
tab: e.currentTarget.dataset.id
});
}
handleWallpaperSelected(e) {
let index, type, blur;
if (!e) {
if (!this.hasChanged()) {
return;
}
type = _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type;
index = _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.index;
blur = 0;
} else {
e.preventDefault();
type = this.state.tab;
index = e.currentTarget.dataset.id;
blur = type == 'patt' ? 0 : this.state.blur;
}
const fname = _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_5__[type][index].name;
const size = type == 'patt' ? _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_5__[type][index].size : 0;
this.setState({
tab: type,
wallpaper: fname,
selectedType: type,
blur: blur
});
this.props.onWallpaperSelected(`../${_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.path}${fname}`, size, this.blurValues[blur]);
}
handleBlurChanged(e) {
e.preventDefault();
const blur = e.currentTarget.value;
this.setState({
blur: blur
});
if (this.state.selectedType == 'img') {
this.props.onWallpaperSelected(`../${_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.path}${this.state.wallpaper}`, 0, this.blurValues[blur]);
}
}
hasChanged() {
return this.state.selectedType != _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type || this.state.wallpaper != _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_5__[_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type][_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.index].name || this.state.blur != 0;
}
render() {
return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
className: "flex-column",
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
className: `panel-form-row${this.hasChanged() ? ' clean-clickable' : ''}`,
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("a", {
className: `flat-button${this.hasChanged() ? '' : ' disabled'}`,
onClick: () => this.handleWallpaperSelected(null),
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("i", {
className: "material-icons",
children: "undo"
}, void 0, false), "\xA0", (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "button_restore",
defaultMessage: "Restore default",
description: "Reset setting to default"
}, void 0, false)]
}, void 0, true)
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("ul", {
className: "tabbar",
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("li", {
className: this.state.tab === 'patt' ? 'active' : null,
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("a", {
href: "#",
"data-id": "patt",
onClick: this.handleTabClick,
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "tabtitle_pattern",
defaultMessage: "pattern",
description: "Tab title Pattern"
}, void 0, false)
}, void 0, false)
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("li", {
className: this.state.tab === 'img' ? 'active' : null,
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("a", {
href: "#",
"data-id": "img",
onClick: this.handleTabClick,
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "tabtitle_image",
defaultMessage: "image",
description: "Tab title Image"
}, void 0, false)
}, void 0, false)
}, void 0, false)]
}, void 0, true), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
id: "settings-form",
className: "scrollable-panel",
children: this.state.tab === 'patt' ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
className: "image-grid",
children: _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_5__.patt.map((img, idx) => {
const selected = this.state.wallpaper === img.name ? ' selected' : '';
const dark = this.props.colorSchema == 'dark' ? 'inverted' : null;
return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
"data-id": idx,
className: `image-grid-cell${selected}`,
onClick: this.handleWallpaperSelected,
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("img", {
src: _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.path + img.name,
alt: img.name,
className: dark,
style: {
width: `${img.size}px`,
height: `${img.size}px`
}
}, void 0, false)
}, idx, false);
})
}, void 0, false) : (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.Fragment, {
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
className: "panel-form-column",
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
className: "panel-form-row",
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("label", {
className: "small",
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "label_blur_wallpaper",
defaultMessage: "Blur:",
description: "Label adjusting blur amount"
}, void 0, false)
}, void 0, false)
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
className: "panel-form-row",
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("input", {
type: "range",
id: "blur",
name: "blur",
min: "0",
max: "5",
step: "1",
value: this.state.blur,
onChange: this.handleBlurChanged
}, void 0, false)
}, void 0, false)]
}, void 0, true), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
className: "image-grid",
children: _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_5__.img.map((img, idx) => {
const selected = this.state.wallpaper === img.name ? ' selected' : '';
return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
"data-id": idx,
className: `image-grid-cell${selected}`,
onClick: this.handleWallpaperSelected,
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("img", {
src: _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.path + img.pr,
alt: img.name,
style: {
width: '100%',
height: '100%'
}
}, void 0, false)
}, idx, false);
})
}, void 0, false)]
}, void 0, true)
}, void 0, false)]
}, void 0, true);
}
}
/***/ })
}]);
//# sourceMappingURL=src_views_wallpapers_jsx.dev.js.map
Reference in New Issue View Git Blame Copy Permalink