ProfilePage.html 36 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033
  1. <!doctype html>
  2. <html class="no-js" lang="">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="x-ua-compatible" content="ie=edge">
  6. <title>time1 documentation</title>
  7. <meta name="description" content="">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <link rel="icon" type="image/x-icon" href="../images/favicon.ico">
  10. <link rel="stylesheet" href="../styles/style.css">
  11. <link rel="stylesheet" href="../styles/dark.css">
  12. </head>
  13. <body>
  14. <script>
  15. // Blocking script to avoid flickering dark mode
  16. // Dark mode toggle button
  17. var useDark = window.matchMedia('(prefers-color-scheme: dark)');
  18. var darkModeState = useDark.matches;
  19. var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
  20. var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
  21. var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
  22. function checkToggle(check) {
  23. for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
  24. $darkModeToggleSwitchers[i].checked = check;
  25. }
  26. }
  27. function toggleDarkMode(state) {
  28. if (window.localStorage) {
  29. localStorage.setItem('compodoc_darkmode-state', state);
  30. }
  31. checkToggle(state);
  32. const hasClass = document.body.classList.contains('dark');
  33. if (state) {
  34. for (var i = 0; i < $darkModeToggles.length; i++) {
  35. $darkModeToggles[i].classList.add('dark');
  36. }
  37. if (!hasClass) {
  38. document.body.classList.add('dark');
  39. }
  40. } else {
  41. for (var i = 0; i < $darkModeToggles.length; i++) {
  42. $darkModeToggles[i].classList.remove('dark');
  43. }
  44. if (hasClass) {
  45. document.body.classList.remove('dark');
  46. }
  47. }
  48. }
  49. useDark.addEventListener('change', function (evt) {
  50. toggleDarkMode(evt.matches);
  51. });
  52. if (darkModeStateLocal) {
  53. darkModeState = darkModeStateLocal === 'true';
  54. }
  55. toggleDarkMode(darkModeState);
  56. </script>
  57. <div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
  58. <div class="d-flex">
  59. <a href="../" class="navbar-brand">time1 documentation</a>
  60. <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
  61. </div>
  62. </div>
  63. <div class="xs-menu menu" id="mobile-menu">
  64. <div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
  65. </div>
  66. <div class="container-fluid main">
  67. <div class="row main">
  68. <div class="d-none d-md-block menu">
  69. <compodoc-menu mode="normal"></compodoc-menu>
  70. </div>
  71. <!-- START CONTENT -->
  72. <div class="content component">
  73. <div class="content-data">
  74. <ol class="breadcrumb">
  75. <li class="breadcrumb-item">Components</li>
  76. <li class="breadcrumb-item"
  77. >
  78. ProfilePage</li>
  79. </ol>
  80. <ul class="nav nav-tabs" role="tablist">
  81. <li class="nav-item">
  82. <a href="#info" class="nav-link active"
  83. role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
  84. </li>
  85. <li class="nav-item">
  86. <a href="#source" class="nav-link"
  87. role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
  88. </li>
  89. <li class="nav-item">
  90. <a href="#templateData" class="nav-link"
  91. role="tab" id="templateData-tab" data-bs-toggle="tab" data-link="template">Template</a>
  92. </li>
  93. <li class="nav-item">
  94. <a href="#styleData" class="nav-link"
  95. role="tab" id="styleData-tab" data-bs-toggle="tab" data-link="style">Styles</a>
  96. </li>
  97. <li class="nav-item">
  98. <a href="#tree" class="nav-link"
  99. role="tab" id="tree-tab" data-bs-toggle="tab" data-link="dom-tree">DOM Tree</a>
  100. </li>
  101. </ul>
  102. <div class="tab-content">
  103. <div class="tab-pane fade active in" id="info"><p class="comment">
  104. <h3>File</h3>
  105. </p>
  106. <p class="comment">
  107. <code>src/app/profile/profile.page.ts</code>
  108. </p>
  109. <section data-compodoc="block-metadata">
  110. <h3>Metadata</h3>
  111. <table class="table table-sm table-hover metadata">
  112. <tbody>
  113. <tr>
  114. <td class="col-md-3">selector</td>
  115. <td class="col-md-9"><code>app-profile</code></td>
  116. </tr>
  117. <tr>
  118. <td class="col-md-3">styleUrls</td>
  119. <td class="col-md-9"><code>./profile.page.scss</code></td>
  120. </tr>
  121. <tr>
  122. <td class="col-md-3">templateUrl</td>
  123. <td class="col-md-9"><code>./profile.page.html</code></td>
  124. </tr>
  125. </tbody>
  126. </table>
  127. </section>
  128. <section data-compodoc="block-index">
  129. <h3 id="index">Index</h3>
  130. <table class="table table-sm table-bordered index-table">
  131. <tbody>
  132. <tr>
  133. <td class="col-md-4">
  134. <h6><b>Properties</b></h6>
  135. </td>
  136. </tr>
  137. <tr>
  138. <td class="col-md-4">
  139. <ul class="index-list">
  140. <li>
  141. <a href="#days" >days</a>
  142. </li>
  143. <li>
  144. <a href="#nickname" >nickname</a>
  145. </li>
  146. </ul>
  147. </td>
  148. </tr>
  149. <tr>
  150. <td class="col-md-4">
  151. <h6><b>Methods</b></h6>
  152. </td>
  153. </tr>
  154. <tr>
  155. <td class="col-md-4">
  156. <ul class="index-list">
  157. <li>
  158. <a href="#backup" >backup</a>
  159. </li>
  160. <li>
  161. <a href="#changeLanguage" >changeLanguage</a>
  162. </li>
  163. <li>
  164. <a href="#clearCache" >clearCache</a>
  165. </li>
  166. <li>
  167. <a href="#clearStats" >clearStats</a>
  168. </li>
  169. <li>
  170. <a href="#goToHelpPage" >goToHelpPage</a>
  171. </li>
  172. <li>
  173. <a href="#goToProfileInfo" >goToProfileInfo</a>
  174. </li>
  175. <li>
  176. <a href="#goToStatsReport" >goToStatsReport</a>
  177. </li>
  178. <li>
  179. <a href="#restore" >restore</a>
  180. </li>
  181. <li>
  182. <a href="#share" >share</a>
  183. </li>
  184. <li>
  185. <a href="#sync" >sync</a>
  186. </li>
  187. </ul>
  188. </td>
  189. </tr>
  190. </tbody>
  191. </table>
  192. </section>
  193. <section data-compodoc="block-constructor">
  194. <h3 id="constructor">Constructor</h3>
  195. <table class="table table-sm table-bordered">
  196. <tbody>
  197. <tr>
  198. <td class="col-md-4">
  199. <code>constructor(navCtrl: NavController)</code>
  200. </td>
  201. </tr>
  202. <tr>
  203. <td class="col-md-4">
  204. <div class="io-line">Defined in <a href="" data-line="11" class="link-to-prism">src/app/profile/profile.page.ts:11</a></div>
  205. </td>
  206. </tr>
  207. <tr>
  208. <td class="col-md-4">
  209. <div>
  210. <b>Parameters :</b>
  211. <table class="params">
  212. <thead>
  213. <tr>
  214. <td>Name</td>
  215. <td>Type</td>
  216. <td>Optional</td>
  217. </tr>
  218. </thead>
  219. <tbody>
  220. <tr>
  221. <td>navCtrl</td>
  222. <td>
  223. <code>NavController</code>
  224. </td>
  225. <td>
  226. No
  227. </td>
  228. </tr>
  229. </tbody>
  230. </table>
  231. </div>
  232. </td>
  233. </tr>
  234. </tbody>
  235. </table>
  236. </section>
  237. <section data-compodoc="block-methods">
  238. <h3 id="methods">
  239. Methods
  240. </h3>
  241. <table class="table table-sm table-bordered">
  242. <tbody>
  243. <tr>
  244. <td class="col-md-4">
  245. <a name="backup"></a>
  246. <span class="name">
  247. <span ><b>backup</b></span>
  248. <a href="#backup"><span class="icon ion-ios-link"></span></a>
  249. </span>
  250. </td>
  251. </tr>
  252. <tr>
  253. <td class="col-md-4">
  254. <code>backup()</code>
  255. </td>
  256. </tr>
  257. <tr>
  258. <td class="col-md-4">
  259. <div class="io-line">Defined in <a href="" data-line="31"
  260. class="link-to-prism">src/app/profile/profile.page.ts:31</a></div>
  261. </td>
  262. </tr>
  263. <tr>
  264. <td class="col-md-4">
  265. <div class="io-description">
  266. <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
  267. </div>
  268. </td>
  269. </tr>
  270. </tbody>
  271. </table>
  272. <table class="table table-sm table-bordered">
  273. <tbody>
  274. <tr>
  275. <td class="col-md-4">
  276. <a name="changeLanguage"></a>
  277. <span class="name">
  278. <span ><b>changeLanguage</b></span>
  279. <a href="#changeLanguage"><span class="icon ion-ios-link"></span></a>
  280. </span>
  281. </td>
  282. </tr>
  283. <tr>
  284. <td class="col-md-4">
  285. <code>changeLanguage()</code>
  286. </td>
  287. </tr>
  288. <tr>
  289. <td class="col-md-4">
  290. <div class="io-line">Defined in <a href="" data-line="51"
  291. class="link-to-prism">src/app/profile/profile.page.ts:51</a></div>
  292. </td>
  293. </tr>
  294. <tr>
  295. <td class="col-md-4">
  296. <div class="io-description">
  297. <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
  298. </div>
  299. </td>
  300. </tr>
  301. </tbody>
  302. </table>
  303. <table class="table table-sm table-bordered">
  304. <tbody>
  305. <tr>
  306. <td class="col-md-4">
  307. <a name="clearCache"></a>
  308. <span class="name">
  309. <span ><b>clearCache</b></span>
  310. <a href="#clearCache"><span class="icon ion-ios-link"></span></a>
  311. </span>
  312. </td>
  313. </tr>
  314. <tr>
  315. <td class="col-md-4">
  316. <code>clearCache()</code>
  317. </td>
  318. </tr>
  319. <tr>
  320. <td class="col-md-4">
  321. <div class="io-line">Defined in <a href="" data-line="43"
  322. class="link-to-prism">src/app/profile/profile.page.ts:43</a></div>
  323. </td>
  324. </tr>
  325. <tr>
  326. <td class="col-md-4">
  327. <div class="io-description">
  328. <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
  329. </div>
  330. </td>
  331. </tr>
  332. </tbody>
  333. </table>
  334. <table class="table table-sm table-bordered">
  335. <tbody>
  336. <tr>
  337. <td class="col-md-4">
  338. <a name="clearStats"></a>
  339. <span class="name">
  340. <span ><b>clearStats</b></span>
  341. <a href="#clearStats"><span class="icon ion-ios-link"></span></a>
  342. </span>
  343. </td>
  344. </tr>
  345. <tr>
  346. <td class="col-md-4">
  347. <code>clearStats()</code>
  348. </td>
  349. </tr>
  350. <tr>
  351. <td class="col-md-4">
  352. <div class="io-line">Defined in <a href="" data-line="47"
  353. class="link-to-prism">src/app/profile/profile.page.ts:47</a></div>
  354. </td>
  355. </tr>
  356. <tr>
  357. <td class="col-md-4">
  358. <div class="io-description">
  359. <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
  360. </div>
  361. </td>
  362. </tr>
  363. </tbody>
  364. </table>
  365. <table class="table table-sm table-bordered">
  366. <tbody>
  367. <tr>
  368. <td class="col-md-4">
  369. <a name="goToHelpPage"></a>
  370. <span class="name">
  371. <span ><b>goToHelpPage</b></span>
  372. <a href="#goToHelpPage"><span class="icon ion-ios-link"></span></a>
  373. </span>
  374. </td>
  375. </tr>
  376. <tr>
  377. <td class="col-md-4">
  378. <code>goToHelpPage()</code>
  379. </td>
  380. </tr>
  381. <tr>
  382. <td class="col-md-4">
  383. <div class="io-line">Defined in <a href="" data-line="15"
  384. class="link-to-prism">src/app/profile/profile.page.ts:15</a></div>
  385. </td>
  386. </tr>
  387. <tr>
  388. <td class="col-md-4">
  389. <div class="io-description">
  390. <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
  391. </div>
  392. </td>
  393. </tr>
  394. </tbody>
  395. </table>
  396. <table class="table table-sm table-bordered">
  397. <tbody>
  398. <tr>
  399. <td class="col-md-4">
  400. <a name="goToProfileInfo"></a>
  401. <span class="name">
  402. <span ><b>goToProfileInfo</b></span>
  403. <a href="#goToProfileInfo"><span class="icon ion-ios-link"></span></a>
  404. </span>
  405. </td>
  406. </tr>
  407. <tr>
  408. <td class="col-md-4">
  409. <code>goToProfileInfo()</code>
  410. </td>
  411. </tr>
  412. <tr>
  413. <td class="col-md-4">
  414. <div class="io-line">Defined in <a href="" data-line="19"
  415. class="link-to-prism">src/app/profile/profile.page.ts:19</a></div>
  416. </td>
  417. </tr>
  418. <tr>
  419. <td class="col-md-4">
  420. <div class="io-description">
  421. <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
  422. </div>
  423. </td>
  424. </tr>
  425. </tbody>
  426. </table>
  427. <table class="table table-sm table-bordered">
  428. <tbody>
  429. <tr>
  430. <td class="col-md-4">
  431. <a name="goToStatsReport"></a>
  432. <span class="name">
  433. <span ><b>goToStatsReport</b></span>
  434. <a href="#goToStatsReport"><span class="icon ion-ios-link"></span></a>
  435. </span>
  436. </td>
  437. </tr>
  438. <tr>
  439. <td class="col-md-4">
  440. <code>goToStatsReport()</code>
  441. </td>
  442. </tr>
  443. <tr>
  444. <td class="col-md-4">
  445. <div class="io-line">Defined in <a href="" data-line="23"
  446. class="link-to-prism">src/app/profile/profile.page.ts:23</a></div>
  447. </td>
  448. </tr>
  449. <tr>
  450. <td class="col-md-4">
  451. <div class="io-description">
  452. <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
  453. </div>
  454. </td>
  455. </tr>
  456. </tbody>
  457. </table>
  458. <table class="table table-sm table-bordered">
  459. <tbody>
  460. <tr>
  461. <td class="col-md-4">
  462. <a name="restore"></a>
  463. <span class="name">
  464. <span ><b>restore</b></span>
  465. <a href="#restore"><span class="icon ion-ios-link"></span></a>
  466. </span>
  467. </td>
  468. </tr>
  469. <tr>
  470. <td class="col-md-4">
  471. <code>restore()</code>
  472. </td>
  473. </tr>
  474. <tr>
  475. <td class="col-md-4">
  476. <div class="io-line">Defined in <a href="" data-line="35"
  477. class="link-to-prism">src/app/profile/profile.page.ts:35</a></div>
  478. </td>
  479. </tr>
  480. <tr>
  481. <td class="col-md-4">
  482. <div class="io-description">
  483. <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
  484. </div>
  485. </td>
  486. </tr>
  487. </tbody>
  488. </table>
  489. <table class="table table-sm table-bordered">
  490. <tbody>
  491. <tr>
  492. <td class="col-md-4">
  493. <a name="share"></a>
  494. <span class="name">
  495. <span ><b>share</b></span>
  496. <a href="#share"><span class="icon ion-ios-link"></span></a>
  497. </span>
  498. </td>
  499. </tr>
  500. <tr>
  501. <td class="col-md-4">
  502. <code>share()</code>
  503. </td>
  504. </tr>
  505. <tr>
  506. <td class="col-md-4">
  507. <div class="io-line">Defined in <a href="" data-line="27"
  508. class="link-to-prism">src/app/profile/profile.page.ts:27</a></div>
  509. </td>
  510. </tr>
  511. <tr>
  512. <td class="col-md-4">
  513. <div class="io-description">
  514. <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
  515. </div>
  516. </td>
  517. </tr>
  518. </tbody>
  519. </table>
  520. <table class="table table-sm table-bordered">
  521. <tbody>
  522. <tr>
  523. <td class="col-md-4">
  524. <a name="sync"></a>
  525. <span class="name">
  526. <span ><b>sync</b></span>
  527. <a href="#sync"><span class="icon ion-ios-link"></span></a>
  528. </span>
  529. </td>
  530. </tr>
  531. <tr>
  532. <td class="col-md-4">
  533. <code>sync()</code>
  534. </td>
  535. </tr>
  536. <tr>
  537. <td class="col-md-4">
  538. <div class="io-line">Defined in <a href="" data-line="39"
  539. class="link-to-prism">src/app/profile/profile.page.ts:39</a></div>
  540. </td>
  541. </tr>
  542. <tr>
  543. <td class="col-md-4">
  544. <div class="io-description">
  545. <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
  546. </div>
  547. </td>
  548. </tr>
  549. </tbody>
  550. </table>
  551. </section>
  552. <section data-compodoc="block-properties">
  553. <h3 id="inputs">
  554. Properties
  555. </h3>
  556. <table class="table table-sm table-bordered">
  557. <tbody>
  558. <tr>
  559. <td class="col-md-4">
  560. <a name="days"></a>
  561. <span class="name">
  562. <span ><b>days</b></span>
  563. <a href="#days"><span class="icon ion-ios-link"></span></a>
  564. </span>
  565. </td>
  566. </tr>
  567. <tr>
  568. <td class="col-md-4">
  569. <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
  570. </td>
  571. </tr>
  572. <tr>
  573. <td class="col-md-4">
  574. <i>Default value : </i><code>123</code>
  575. </td>
  576. </tr>
  577. <tr>
  578. <td class="col-md-4">
  579. <div class="io-line">Defined in <a href="" data-line="11" class="link-to-prism">src/app/profile/profile.page.ts:11</a></div>
  580. </td>
  581. </tr>
  582. </tbody>
  583. </table>
  584. <table class="table table-sm table-bordered">
  585. <tbody>
  586. <tr>
  587. <td class="col-md-4">
  588. <a name="nickname"></a>
  589. <span class="name">
  590. <span ><b>nickname</b></span>
  591. <a href="#nickname"><span class="icon ion-ios-link"></span></a>
  592. </span>
  593. </td>
  594. </tr>
  595. <tr>
  596. <td class="col-md-4">
  597. <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
  598. </td>
  599. </tr>
  600. <tr>
  601. <td class="col-md-4">
  602. <i>Default value : </i><code>&#x27;用户昵称&#x27;</code>
  603. </td>
  604. </tr>
  605. <tr>
  606. <td class="col-md-4">
  607. <div class="io-line">Defined in <a href="" data-line="10" class="link-to-prism">src/app/profile/profile.page.ts:10</a></div>
  608. </td>
  609. </tr>
  610. </tbody>
  611. </table>
  612. </section>
  613. </div>
  614. <div class="tab-pane fade tab-source-code" id="source">
  615. <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component } from &#x27;@angular/core&#x27;;
  616. import { NavController } from &#x27;@ionic/angular&#x27;;
  617. @Component({
  618. selector: &#x27;app-profile&#x27;,
  619. templateUrl: &#x27;./profile.page.html&#x27;,
  620. styleUrls: [&#x27;./profile.page.scss&#x27;],
  621. })
  622. export class ProfilePage {
  623. nickname: string &#x3D; &#x27;用户昵称&#x27;;
  624. days: number &#x3D; 123; // 模拟数据,可根据实际情况修改
  625. constructor(private navCtrl: NavController) {}
  626. goToHelpPage() {
  627. this.navCtrl.navigateForward(&#x27;/help&#x27;);
  628. }
  629. goToProfileInfo() {
  630. this.navCtrl.navigateForward(&#x27;/profile-info&#x27;);
  631. }
  632. goToStatsReport() {
  633. this.navCtrl.navigateForward(&#x27;/stats-report&#x27;);
  634. }
  635. share() {
  636. // 分享功能实现
  637. }
  638. backup() {
  639. // 备份功能实现
  640. }
  641. restore() {
  642. // 恢复功能实现
  643. }
  644. sync() {
  645. // 云同步功能实现
  646. }
  647. clearCache() {
  648. // 清除缓存功能实现
  649. }
  650. clearStats() {
  651. // 清除统计数据功能实现
  652. }
  653. changeLanguage() {
  654. // 语言设置功能实现
  655. }
  656. }
  657. </code></pre>
  658. </div>
  659. <div class="tab-pane fade " id="templateData">
  660. <pre class="line-numbers"><code class="language-html">&lt;ion-header&gt;
  661. &lt;ion-toolbar&gt;
  662. &lt;ion-title&gt;我的&lt;/ion-title&gt;
  663. &lt;ion-buttons slot&#x3D;&quot;end&quot;&gt;
  664. &lt;ion-button (click)&#x3D;&quot;goToHelpPage()&quot;&gt;
  665. &lt;ion-icon name&#x3D;&quot;help-circle-outline&quot;&gt;&lt;/ion-icon&gt;
  666. &lt;/ion-button&gt;
  667. &lt;/ion-buttons&gt;
  668. &lt;/ion-toolbar&gt;
  669. &lt;/ion-header&gt;
  670. &lt;ion-content&gt;
  671. &lt;ion-list&gt;
  672. &lt;ion-item (click)&#x3D;&quot;goToProfileInfo()&quot;&gt;
  673. &lt;ion-avatar slot&#x3D;&quot;start&quot;&gt;
  674. &lt;img src&#x3D;&quot;assets/img/avatar.png&quot; alt&#x3D;&quot;头像&quot;&gt;
  675. &lt;/ion-avatar&gt;
  676. &lt;ion-label&gt;
  677. &lt;h2&gt;{{nickname}}&lt;/h2&gt;
  678. &lt;p&gt;已坚持打卡{{days}}天&lt;/p&gt;
  679. &lt;/ion-label&gt;
  680. &lt;/ion-item&gt;
  681. &lt;ion-item (click)&#x3D;&quot;goToStatsReport()&quot;&gt;
  682. &lt;ion-label&gt;统计报告&lt;/ion-label&gt;
  683. &lt;ion-icon slot&#x3D;&quot;end&quot; name&#x3D;&quot;bar-chart-outline&quot;&gt;&lt;/ion-icon&gt;
  684. &lt;/ion-item&gt;
  685. &lt;ion-item (click)&#x3D;&quot;share()&quot;&gt;
  686. &lt;ion-label&gt;分享&lt;/ion-label&gt;
  687. &lt;ion-icon slot&#x3D;&quot;end&quot; name&#x3D;&quot;share-social-outline&quot;&gt;&lt;/ion-icon&gt;
  688. &lt;/ion-item&gt;
  689. &lt;ion-item (click)&#x3D;&quot;backup()&quot;&gt;
  690. &lt;ion-label&gt;备份&lt;/ion-label&gt;
  691. &lt;ion-icon slot&#x3D;&quot;end&quot; name&#x3D;&quot;cloud-upload-outline&quot;&gt;&lt;/ion-icon&gt;
  692. &lt;/ion-item&gt;
  693. &lt;ion-item (click)&#x3D;&quot;restore()&quot;&gt;
  694. &lt;ion-label&gt;恢复&lt;/ion-label&gt;
  695. &lt;ion-icon slot&#x3D;&quot;end&quot; name&#x3D;&quot;cloud-download-outline&quot;&gt;&lt;/ion-icon&gt;
  696. &lt;/ion-item&gt;
  697. &lt;ion-item (click)&#x3D;&quot;sync()&quot;&gt;
  698. &lt;ion-label&gt;云同步&lt;/ion-label&gt;
  699. &lt;ion-icon slot&#x3D;&quot;end&quot; name&#x3D;&quot;sync-outline&quot;&gt;&lt;/ion-icon&gt;
  700. &lt;/ion-item&gt;
  701. &lt;ion-item (click)&#x3D;&quot;clearCache()&quot;&gt;
  702. &lt;ion-label&gt;清除缓存&lt;/ion-label&gt;
  703. &lt;ion-icon slot&#x3D;&quot;end&quot; name&#x3D;&quot;trash-bin-outline&quot;&gt;&lt;/ion-icon&gt;
  704. &lt;/ion-item&gt;
  705. &lt;ion-item (click)&#x3D;&quot;clearStats()&quot;&gt;
  706. &lt;ion-label&gt;清除统计数据&lt;/ion-label&gt;
  707. &lt;ion-icon slot&#x3D;&quot;end&quot; name&#x3D;&quot;stats-chart-outline&quot;&gt;&lt;/ion-icon&gt;
  708. &lt;/ion-item&gt;
  709. &lt;ion-item (click)&#x3D;&quot;changeLanguage()&quot;&gt;
  710. &lt;ion-label&gt;语言设置&lt;/ion-label&gt;
  711. &lt;ion-icon slot&#x3D;&quot;end&quot; name&#x3D;&quot;language-outline&quot;&gt;&lt;/ion-icon&gt;
  712. &lt;/ion-item&gt;
  713. &lt;/ion-list&gt;
  714. &lt;ion-content&gt;
  715. </code></pre>
  716. </div>
  717. <div class="tab-pane fade " id="styleData">
  718. <p class="comment">
  719. <code>./profile.page.scss</code>
  720. </p>
  721. <pre class="line-numbers"><code class="language-scss">ion-item {
  722. --background: #ffffff;
  723. --color: #000000;
  724. --border-color: #f4f4f4;
  725. --border-width: 1px;
  726. --min-height: 50px;
  727. --padding-start: 10px;
  728. --padding-end: 10px;
  729. --inner-padding-start: 10px;
  730. --inner-padding-end: 10px;
  731. --inner-padding-top: 5px;
  732. --inner-padding-bottom: 5px;
  733. }
  734. ion-avatar img {
  735. width: 100%;
  736. height: auto;
  737. border-radius: 50%;
  738. }
  739. ion-label {
  740. h2 {
  741. font-size: 1.2em;
  742. margin: 0;
  743. padding: 0;
  744. }
  745. p {
  746. font-size: 0.9em;
  747. color: gray;
  748. }
  749. }
  750. </code></pre>
  751. </div>
  752. <div class="tab-pane fade " id="tree">
  753. <div id="tree-container"></div>
  754. <div class="tree-legend">
  755. <div class="title">
  756. <b>Legend</b>
  757. </div>
  758. <div>
  759. <div class="color htmlelement"></div><span>Html element</span>
  760. </div>
  761. <div>
  762. <div class="color component"></div><span>Component</span>
  763. </div>
  764. <div>
  765. <div class="color directive"></div><span>Html element with directive</span>
  766. </div>
  767. </div>
  768. </div>
  769. </div>
  770. <script src="../js/libs/vis.min.js"></script>
  771. <script src="../js/libs/htmlparser.js"></script>
  772. <script src="../js/libs/deep-iterator.js"></script>
  773. <script>
  774. var COMPONENT_TEMPLATE = '<div><ion-header> <ion-toolbar> <ion-title>我的</ion-title> <ion-buttons slot="end"> <ion-button (click)="goToHelpPage()"> <ion-icon name="help-circle-outline"></ion-icon> </ion-button> </ion-buttons> </ion-toolbar></ion-header><ion-content> <ion-list> <ion-item (click)="goToProfileInfo()"> <ion-avatar slot="start"> <img src="assets/img/avatar.png" alt="头像"> </ion-avatar> <ion-label> <h2>{{nickname}}</h2> <p>已坚持打卡{{days}}天</p> </ion-label> </ion-item> <ion-item (click)="goToStatsReport()"> <ion-label>统计报告</ion-label> <ion-icon slot="end" name="bar-chart-outline"></ion-icon> </ion-item> <ion-item (click)="share()"> <ion-label>分享</ion-label> <ion-icon slot="end" name="share-social-outline"></ion-icon> </ion-item> <ion-item (click)="backup()"> <ion-label>备份</ion-label> <ion-icon slot="end" name="cloud-upload-outline"></ion-icon> </ion-item> <ion-item (click)="restore()"> <ion-label>恢复</ion-label> <ion-icon slot="end" name="cloud-download-outline"></ion-icon> </ion-item> <ion-item (click)="sync()"> <ion-label>云同步</ion-label> <ion-icon slot="end" name="sync-outline"></ion-icon> </ion-item> <ion-item (click)="clearCache()"> <ion-label>清除缓存</ion-label> <ion-icon slot="end" name="trash-bin-outline"></ion-icon> </ion-item> <ion-item (click)="clearStats()"> <ion-label>清除统计数据</ion-label> <ion-icon slot="end" name="stats-chart-outline"></ion-icon> </ion-item> <ion-item (click)="changeLanguage()"> <ion-label>语言设置</ion-label> <ion-icon slot="end" name="language-outline"></ion-icon> </ion-item> </ion-list><ion-content></div>'
  775. var COMPONENTS = [{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'ExploreContainerComponent', 'selector': 'app-explore-container'},{'name': 'HomePage', 'selector': 'app-home'},{'name': 'ProfilePage', 'selector': 'app-profile'},{'name': 'ServicesPage', 'selector': 'app-services'},{'name': 'TabsPage', 'selector': 'app-tabs'},{'name': 'TasksPage', 'selector': 'app-tasks'}];
  776. var DIRECTIVES = [];
  777. var ACTUAL_COMPONENT = {'name': 'ProfilePage'};
  778. </script>
  779. <script src="../js/tree.js"></script>
  780. </div><div class="search-results">
  781. <div class="has-results">
  782. <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
  783. <ul class="search-results-list"></ul>
  784. </div>
  785. <div class="no-results">
  786. <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
  787. </div>
  788. </div>
  789. </div>
  790. <!-- END CONTENT -->
  791. </div>
  792. </div>
  793. <label class="dark-mode-switch">
  794. <input type="checkbox">
  795. <span class="slider">
  796. <svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
  797. <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
  798. </svg>
  799. </span>
  800. </label>
  801. <script>
  802. var COMPODOC_CURRENT_PAGE_DEPTH = 1;
  803. var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
  804. var COMPODOC_CURRENT_PAGE_URL = 'ProfilePage.html';
  805. var MAX_SEARCH_RESULTS = 15;
  806. </script>
  807. <script>
  808. $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
  809. checkToggle(darkModeState);
  810. if ($darkModeToggleSwitchers.length > 0) {
  811. for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
  812. $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
  813. darkModeState = !darkModeState;
  814. toggleDarkMode(darkModeState);
  815. });
  816. }
  817. }
  818. </script>
  819. <script src="../js/libs/custom-elements.min.js"></script>
  820. <script src="../js/libs/lit-html.js"></script>
  821. <script src="../js/menu-wc.js" defer></script>
  822. <script nomodule src="../js/menu-wc_es5.js" defer></script>
  823. <script src="../js/libs/bootstrap-native.js"></script>
  824. <script src="../js/libs/es6-shim.min.js"></script>
  825. <script src="../js/libs/EventDispatcher.js"></script>
  826. <script src="../js/libs/promise.min.js"></script>
  827. <script src="../js/libs/zepto.min.js"></script>
  828. <script src="../js/compodoc.js"></script>
  829. <script src="../js/tabs.js"></script>
  830. <script src="../js/menu.js"></script>
  831. <script src="../js/libs/clipboard.min.js"></script>
  832. <script src="../js/libs/prism.js"></script>
  833. <script src="../js/sourceCode.js"></script>
  834. <script src="../js/search/search.js"></script>
  835. <script src="../js/search/lunr.min.js"></script>
  836. <script src="../js/search/search-lunr.js"></script>
  837. <script src="../js/search/search_index.js"></script>
  838. <script src="../js/lazy-load-graphs.js"></script>
  839. </body>
  840. </html>