Compare commits

..
6 Commits
Author SHA1 Message Date
cast1e 8c34ca8c4c fix mobile display issue 2025-03-08 23:45:36 +08:00
cast1e 15a51caf4b Merge branch 'master' of https://git.zjueva.net/cast1e/wordIn 2025-03-07 21:25:21 +08:00
cast1e 02d0402c15 adjust animation 2025-03-07 21:24:27 +08:00
cast1e 5fd32162ac fix mobile device loading issue 2025-03-07 13:17:49 +08:00
cast1e 4cf4fdce17 1.3 beta 2025-03-07 12:04:28 +08:00
cast1e 5c258b85e8 delete auto generated files 2025-03-06 23:11:34 +08:00
24 changed files with 726 additions and 462 deletions
+1 -1
View File
@@ -24,4 +24,4 @@ pnpm-debug.log*
*.sw?
auto-imports.d.ts
component.d.ts
components.d.ts
-39
View File
@@ -1,39 +0,0 @@
/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
// biome-ignore lint: disable
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
CDialog: typeof import('./src/components/UI/CDialog.vue')['default']
ElAside: typeof import('element-plus/es')['ElAside']
ElButton: typeof import('element-plus/es')['ElButton']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElInput: typeof import('element-plus/es')['ElInput']
ElLink: typeof import('element-plus/es')['ElLink']
ElMain: typeof import('element-plus/es')['ElMain']
ElOption: typeof import('element-plus/es')['ElOption']
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElStep: typeof import('element-plus/es')['ElStep']
ElSteps: typeof import('element-plus/es')['ElSteps']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElText: typeof import('element-plus/es')['ElText']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
}
+2 -17
View File
@@ -8,24 +8,9 @@
<title>
Wordin
</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#app {
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/misans@4.0.0/lib/Normal/MiSans-Medium.min.css" media="print" onload="this.media='all'" crossorigin="anonymous">
</head>
<body>
<noscript>
<strong>We're sorry but doesn't work properly without JavaScript enabled.
+2 -1
View File
@@ -11,8 +11,9 @@
"dependencies": {
"@jamescoyle/vue-icon": "^0.1.2",
"@mdi/font": "^7.4.47",
"@types/animejs": "^3.1.13",
"animejs": "^3.2.2",
"axios": "^1.5.1",
"boxicons": "^2.1.4",
"core-js": "^3.8.3",
"crypto-js": "^4.1.1",
"marked": "^11.1.1",
+23 -157
View File
@@ -14,12 +14,15 @@ importers:
'@mdi/font':
specifier: ^7.4.47
version: 7.4.47
'@types/animejs':
specifier: ^3.1.13
version: 3.1.13
animejs:
specifier: ^3.2.2
version: 3.2.2
axios:
specifier: ^1.5.1
version: 1.8.1
boxicons:
specifier: ^2.1.4
version: 2.1.4
core-js:
specifier: ^3.8.3
version: 3.41.0
@@ -1070,6 +1073,9 @@ packages:
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
engines: {node: '>=10.13.0'}
'@types/animejs@3.1.13':
resolution: {integrity: sha512-yWg9l1z7CAv/TKpty4/vupEh24jDGUZXv4r26StRkpUPQm04ztJaftgpto8vwdFs8SiTq6XfaPKCSI+wjzNMvQ==}
'@types/body-parser@1.19.5':
resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
@@ -1445,9 +1451,6 @@ packages:
'@webassemblyjs/wast-printer@1.14.1':
resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
'@webcomponents/webcomponentsjs@2.8.0':
resolution: {integrity: sha512-loGD63sacRzOzSJgQnB9ZAhaQGkN7wl2Zuw7tsphI5Isa0irijrRo6EnJii/GgjGefIFO8AIO7UivzRhFaEk9w==}
'@xtuc/ieee754@1.2.0':
resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
@@ -1503,6 +1506,9 @@ packages:
alien-signals@1.0.4:
resolution: {integrity: sha512-DJqqQD3XcsaQcQ1s+iE2jDUZmmQpXwHiR6fCAim/w87luaW+vmLY8fMlrdkmRwzaFXhkxf3rqPCR59tKVv1MDw==}
animejs@3.2.2:
resolution: {integrity: sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==}
ansi-escapes@3.2.0:
resolution: {integrity: sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==}
engines: {node: '>=4'}
@@ -1639,9 +1645,6 @@ packages:
boolbase@1.0.0:
resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
boxicons@2.1.4:
resolution: {integrity: sha512-BvJNfYfnE4g9WQ7GL91fftxMOTwAleWlPFwvQJPYb/Ju7aLjlQ/Eu55AH9JLNk/OR82z+ZSq4TbKzbV/e5Rr0A==}
brace-expansion@1.1.11:
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -2186,24 +2189,9 @@ packages:
resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
detect-hover@1.0.3:
resolution: {integrity: sha512-HtLoY+tClgYucJNiovNICGWFp9nOGVmHY44s7L62iPqORXM9vujeWFaVcqtA7XRvp/2Y+4RBUfHbDKFGN+xxZQ==}
detect-it@3.0.7:
resolution: {integrity: sha512-RxpgcdbatUX6epJE09K16iJqF7x6iEcEdoL18FR2zpBO4JhnL7aMOAUoUEyexdtbWOSfTmoDWmeD6mwRBQyRXg==}
detect-node@2.1.0:
resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
detect-passive-events@1.0.5:
resolution: {integrity: sha512-foW7Q35wwOCxVzW0xLf5XeB5Fhe7oyRgvkBYdiP9IWgLMzjqUqTvsJv9ymuEWGjY6AoDXD3OC294+Z9iuOw0QA==}
detect-pointer@1.0.3:
resolution: {integrity: sha512-d0o/Puo3fiGSCXy6H039h9Kwz+mmYCGKZ/qtPFnpN3WfsumjC1C9b5KKvRu+aYnfdI8peqN/iAe7dPd85qIt2g==}
detect-touch-events@2.0.2:
resolution: {integrity: sha512-g8GWBkJLiIDRJfRXEdrd1wMXpNyGId2DkbfuwFahSb4OCvn717hyRJtAcEDISfp3zkwEhZ4Y4woHPA6DeyB3Fw==}
dir-glob@3.0.1:
resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
engines: {node: '>=8'}
@@ -2661,12 +2649,6 @@ packages:
highlight.js@10.7.3:
resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
history@4.10.1:
resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==}
hoist-non-react-statics@2.5.5:
resolution: {integrity: sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==}
hookable@5.5.3:
resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
@@ -2772,9 +2754,6 @@ packages:
inherits@2.0.4:
resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
invariant@2.2.4:
resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
ipaddr.js@1.9.1:
resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
engines: {node: '>= 0.10'}
@@ -2858,9 +2837,6 @@ packages:
resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
engines: {node: '>=8'}
isarray@0.0.1:
resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
isarray@1.0.0:
resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
@@ -3399,9 +3375,6 @@ packages:
path-to-regexp@0.1.12:
resolution: {integrity: sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==}
path-to-regexp@1.9.0:
resolution: {integrity: sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==}
path-type@4.0.0:
resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
engines: {node: '>=8'}
@@ -3731,24 +3704,9 @@ packages:
peerDependencies:
react: ^16.14.0
react-interactive@0.8.3:
resolution: {integrity: sha512-mmRvA9aKP7zu9kVfP1AX1egX8tFlnE3DDXq92z0JTZezfOpmeQBzr77O1+mTV54OOmn+M2t6c5kFD5VnuFoM7A==}
peerDependencies:
react: '>=15'
react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
react-router-dom@4.3.1:
resolution: {integrity: sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==}
peerDependencies:
react: '>=15'
react-router@4.3.1:
resolution: {integrity: sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==}
peerDependencies:
react: '>=15'
react@16.14.0:
resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==}
engines: {node: '>=0.10.0'}
@@ -3818,9 +3776,6 @@ packages:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
engines: {node: '>=4'}
resolve-pathname@3.0.0:
resolution: {integrity: sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==}
resolve@1.22.10:
resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
engines: {node: '>= 0.4'}
@@ -4160,12 +4115,6 @@ packages:
thunky@1.1.0:
resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
tiny-invariant@1.3.3:
resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
tiny-warning@1.0.3:
resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
tinyglobby@0.2.12:
resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
engines: {node: '>=12.0.0'}
@@ -4318,9 +4267,6 @@ packages:
validate-npm-package-license@3.0.4:
resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
value-equal@1.0.1:
resolution: {integrity: sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==}
vary@1.1.2:
resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
engines: {node: '>= 0.8'}
@@ -4471,9 +4417,6 @@ packages:
webpack-plugin-vuetify:
optional: true
warning@4.0.3:
resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
watchpack@2.4.2:
resolution: {integrity: sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==}
engines: {node: '>=10.13.0'}
@@ -5640,6 +5583,8 @@ snapshots:
'@trysound/sax@0.2.0': {}
'@types/animejs@3.1.13': {}
'@types/body-parser@1.19.5':
dependencies:
'@types/connect': 3.4.38
@@ -6354,8 +6299,6 @@ snapshots:
'@webassemblyjs/ast': 1.14.1
'@xtuc/long': 4.2.2
'@webcomponents/webcomponentsjs@2.8.0': {}
'@xtuc/ieee754@1.2.0': {}
'@xtuc/long@4.2.2': {}
@@ -6406,6 +6349,8 @@ snapshots:
alien-signals@1.0.4: {}
animejs@3.2.2: {}
ansi-escapes@3.2.0: {}
ansi-html-community@0.0.8: {}
@@ -6558,15 +6503,6 @@ snapshots:
boolbase@1.0.0: {}
boxicons@2.1.4:
dependencies:
'@webcomponents/webcomponentsjs': 2.8.0
prop-types: 15.8.1
react: 16.14.0
react-dom: 16.14.0(react@16.14.0)
react-interactive: 0.8.3(react@16.14.0)
react-router-dom: 4.3.1(react@16.14.0)
brace-expansion@1.1.11:
dependencies:
balanced-match: 1.0.2
@@ -6970,23 +6906,8 @@ snapshots:
destroy@1.2.0: {}
detect-hover@1.0.3: {}
detect-it@3.0.7:
dependencies:
detect-hover: 1.0.3
detect-passive-events: 1.0.5
detect-pointer: 1.0.3
detect-touch-events: 2.0.2
detect-node@2.1.0: {}
detect-passive-events@1.0.5: {}
detect-pointer@1.0.3: {}
detect-touch-events@2.0.2: {}
dir-glob@3.0.1:
dependencies:
path-type: 4.0.0
@@ -7524,17 +7445,6 @@ snapshots:
highlight.js@10.7.3: {}
history@4.10.1:
dependencies:
'@babel/runtime': 7.26.9
loose-envify: 1.4.0
resolve-pathname: 3.0.0
tiny-invariant: 1.3.3
tiny-warning: 1.0.3
value-equal: 1.0.1
hoist-non-react-statics@2.5.5: {}
hookable@5.5.3: {}
hosted-git-info@2.8.9: {}
@@ -7648,10 +7558,6 @@ snapshots:
inherits@2.0.4: {}
invariant@2.2.4:
dependencies:
loose-envify: 1.4.0
ipaddr.js@1.9.1: {}
ipaddr.js@2.2.0: {}
@@ -7706,8 +7612,6 @@ snapshots:
dependencies:
is-docker: 2.2.1
isarray@0.0.1: {}
isarray@1.0.0: {}
isexe@2.0.0: {}
@@ -7869,6 +7773,7 @@ snapshots:
loose-envify@1.4.0:
dependencies:
js-tokens: 4.0.0
optional: true
lower-case@2.0.2:
dependencies:
@@ -8198,10 +8103,6 @@ snapshots:
path-to-regexp@0.1.12: {}
path-to-regexp@1.9.0:
dependencies:
isarray: 0.0.1
path-type@4.0.0: {}
pathe@2.0.3: {}
@@ -8471,6 +8372,7 @@ snapshots:
loose-envify: 1.4.0
object-assign: 4.1.1
react-is: 16.13.1
optional: true
proxy-addr@2.0.7:
dependencies:
@@ -8518,42 +8420,17 @@ snapshots:
prop-types: 15.8.1
react: 16.14.0
scheduler: 0.19.1
optional: true
react-interactive@0.8.3(react@16.14.0):
dependencies:
detect-it: 3.0.7
object-assign: 4.1.1
prop-types: 15.8.1
react: 16.14.0
react-is@16.13.1: {}
react-router-dom@4.3.1(react@16.14.0):
dependencies:
history: 4.10.1
invariant: 2.2.4
loose-envify: 1.4.0
prop-types: 15.8.1
react: 16.14.0
react-router: 4.3.1(react@16.14.0)
warning: 4.0.3
react-router@4.3.1(react@16.14.0):
dependencies:
history: 4.10.1
hoist-non-react-statics: 2.5.5
invariant: 2.2.4
loose-envify: 1.4.0
path-to-regexp: 1.9.0
prop-types: 15.8.1
react: 16.14.0
warning: 4.0.3
react-is@16.13.1:
optional: true
react@16.14.0:
dependencies:
loose-envify: 1.4.0
object-assign: 4.1.1
prop-types: 15.8.1
optional: true
read-pkg-up@7.0.1:
dependencies:
@@ -8633,8 +8510,6 @@ snapshots:
resolve-from@4.0.0: {}
resolve-pathname@3.0.0: {}
resolve@1.22.10:
dependencies:
is-core-module: 2.16.1
@@ -8700,6 +8575,7 @@ snapshots:
dependencies:
loose-envify: 1.4.0
object-assign: 4.1.1
optional: true
schema-utils@2.7.1:
dependencies:
@@ -9030,10 +8906,6 @@ snapshots:
thunky@1.1.0: {}
tiny-invariant@1.3.3: {}
tiny-warning@1.0.3: {}
tinyglobby@0.2.12:
dependencies:
fdir: 6.4.3(picomatch@4.0.2)
@@ -9180,8 +9052,6 @@ snapshots:
spdx-correct: 3.2.0
spdx-expression-parse: 3.0.1
value-equal@1.0.1: {}
vary@1.1.2: {}
vite-plugin-vuetify@2.1.0(vite@6.2.0(@types/node@20.17.23)(terser@5.39.0))(vue@3.5.13(typescript@5.8.2))(vuetify@3.7.15):
@@ -9344,10 +9214,6 @@ snapshots:
typescript: 5.8.2
vite-plugin-vuetify: 2.1.0(vite@6.2.0(@types/node@20.17.23)(terser@5.39.0))(vue@3.5.13(typescript@5.8.2))(vuetify@3.7.15)
warning@4.0.3:
dependencies:
loose-envify: 1.4.0
watchpack@2.4.2:
dependencies:
glob-to-regexp: 0.4.1
+24 -12
View File
@@ -1,6 +1,6 @@
<template>
<div class="pconly">
<div id="navibar">
<div class="pconly main-navibar">
<div class="main-navibar">
<div class="navi-item"><el-link @click="go('/')" id="logo">wordIn</el-link></div>
<div class="navi-item"><el-link @click="go('/select')" class="link">背诵</el-link></div>
<div class="navi-item"><el-link @click="go('/manage')" class="link">编辑单词本</el-link></div>
@@ -8,14 +8,16 @@
<div class="navi-item"><el-link @click="go('/about')" class="link">关于</el-link></div>
</div>
</div>
<router-view style=""></router-view>
<div class="main-app-view">
<router-view></router-view>
</div>
<div class="mbonly">
<div id="navibar">
<div class="navi-item"><box-icon name="home-alt-2" @click="$router.push('/')" color="var(--text-color)" size="27px"></box-icon><div>主页</div></div>
<div class="navi-item"><box-icon name="book-open" @click="$router.push('/select')" color="var(--text-color)" size="27px"></box-icon><div>背诵</div></div>
<div class="navi-item"><box-icon name="folder" @click="$router.push('/manage')" color="var(--text-color)" size="27px"></box-icon><div>浏览</div></div>
<div class="navi-item"><box-icon name="file" @click="$router.push('/manual')" color="var(--text-color)" size="27px"></box-icon><div>说明</div></div>
<div class="navi-item"><box-icon name="info-circle" @click="$router.push('/about')" color="var(--text-color)" size="27px"></box-icon><div>关于</div></div>
<div class="main-navibar">
<div class="navi-item"><v-icon @click="$router.push('/')">mdi-home</v-icon> <div>主页</div></div>
<div class="navi-item"><v-icon @click="$router.push('/select')">mdi-book</v-icon> <div>背诵</div></div>
<div class="navi-item"><v-icon @click="$router.push('/manage')">mdi-folder</v-icon><div>浏览</div></div>
<div class="navi-item"><v-icon @click="$router.push('/manual')">mdi-file</v-icon><div>说明</div></div>
<div class="navi-item"><v-icon @click="$router.push('/about')">mdi-information</v-icon><div>关于</div></div>
</div>
</div>
</template>
@@ -32,8 +34,8 @@ const go = (path: string) => {
<style scoped>
@media screen and (max-width: 500px) {
#navibar {
height: 55px;
.main-navibar {
height: 60px;
border-top: solid 1px var(--bd-color);
display: flex;
flex-direction: row;
@@ -58,7 +60,7 @@ const go = (path: string) => {
}
@media screen and (min-width: 500px) {
#navibar {
.main-navibar {
height: 60px;
border-bottom: solid 1px var(--bd-color);
display: flex;
@@ -86,4 +88,14 @@ const go = (path: string) => {
.link {
font-size: 18px;
}
</style>
<style>
.main-app-view{
height: calc(100% - 60px);
width: 100%;
}
.main-navibar{
background-color: var(--bg-color-solid);
}
</style>
+132
View File
@@ -0,0 +1,132 @@
<style scoped>
html:not(.dark) .dynamic-bg-container {
background: linear-gradient(135deg,
#ffe8f3,
#d9f3ff);
}
html:not(.dark) .dynamic-bg-wrapper::before,
html:not(.dark) .dynamic-bg-wrapper::after {
background: conic-gradient(from 0deg,
#ff9aa2,
/* Soft pink */
#ffb7b2,
/* Light peach */
#ffdac1,
/* Pastel yellow */
#e2f0cb,
/* Mint green */
#a2e4ff,
/* Baby blue */
#c9afff,
/* Lavender */
#ffb7b2,
#ff9aa2);
}
html.dark .dynamic-bg-container {
background: linear-gradient(135deg,
#331a26,
#1a2a33);
}
html.dark .dynamic-bg-wrapper::before,
html.dark .dynamic-bg-wrapper::after {
background: conic-gradient(from 0deg,
#662a30,
#663a36,
#664a40,
#3a4a33,
#2a4a66,
#3a2a66,
#663a36,
#662a30);
opacity: 0.6;
}
.dynamic-bg-container {
margin: 0;
padding: 0;
height:max-content;
width: 100%;
/* Soft pastel gradient background */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.dynamic-bg-wrapper {
position: absolute;
width: 100%;
/* Fill the entire screen */
height: 100%;
overflow: hidden;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.2),
rgba(0, 0, 0, 0.1));
}
.dynamic-bg-wrapper::before,
.dynamic-bg-wrapper::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
transform: translate(-50%, -50%);
animation: rotate 8s linear infinite;
filter: blur(50px);
/* Create a soft glowing effect */
opacity: 0.8;
z-index: 9;
}
/* Secondary rotating layer for depth */
.dynamic-bg-wrapper::after {
width: 180%;
height: 180%;
animation: rotate-reverse 10s linear infinite;
opacity: 0.6;
}
/* Rotating animations */
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes rotate-reverse {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
.dynamic-bg-content {
width: 100%;
height: max-content;
margin-bottom: 10px;
z-index: 10;
}
</style>
<template>
<div class="dynamic-bg-container">
<div class="dynamic-bg-wrapper"></div>
<div class="dynamic-bg-content">
<slot name="content"></slot>
</div>
</div>
</template>
+3 -4
View File
@@ -1,17 +1,16 @@
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import "element-plus/dist/index.css";
import "element-plus/theme-chalk/dark/css-vars.css";
import { useDarkMode } from "./composables/useDarkMode";
import router from "./router";
import "./styles/global.css";
import "element-plus/theme-chalk/dark/css-vars.css";
import "@mdi/font/css/materialdesignicons.css"
import "vuetify/styles"
// Vuetify
import "vuetify/styles";
import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi";
import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using
const vuetify = createVuetify({
icons: {
+8 -2
View File
@@ -1,7 +1,5 @@
# 关于 wordIn
---
## 1. wordIn 是什么
wordIn 是一款基于 vue.js 的单词默写器,致力于为用户提供便捷有效的单词记忆方式
@@ -23,6 +21,14 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
## 3.更新日志
### 1.03
1. 更新内容
- 使用 anime.js 构建动画效果
- 修复显示 bug
- 主页视觉效果更新
### 1.02
1. 更新内容
+1 -3
View File
@@ -1,7 +1,5 @@
# wordIn 使用说明
---
- 近期发现ZJUWLAN无法访问unpkg.com导致部分图标无法显示,请使用ZJUWLAN-Secure访问
## 1. 背诵单词
@@ -27,7 +25,7 @@
- 点击插入到单词本即可将现在显示的单词插入到单词本中
- 进度记忆功能
- 一下子没有背完?不必担心,wordIn会自动记忆您的背诵进度,您可以从主页随时返回到背诵
## 2. 单词本管理
### 新建单词本
+1 -1
View File
@@ -1,7 +1,7 @@
import {createRouter,createWebHashHistory} from 'vue-router'
const manage = ()=>import('@/views/ManageView.vue');
const editor = ()=>import('@/views/manage/EditorView.vue');
const home = ()=>import("@/views/HomeView.vue");
import home from "@/views/HomeView.vue";
const recite = ()=>import('@/views/recite/ReciteView.vue');
const setlist = ()=>import('@/views/manage/SetListView.vue');
const newset = ()=>import('@/views/manage/NewSetView.vue');
+41 -31
View File
@@ -1,39 +1,49 @@
html{
height: 100%;
width: 100%;
overflow: hidden !important;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden !important;
font-family:
'MiSans',
-apple-system, /* macOS, iOS */
BlinkMacSystemFont, /* Chrome macOS */
"Segoe UI", /* Windows */
Roboto, /* Android */
"Helvetica Neue", /* 一些 macOS 和 iOS 系统 */
Arial, /* 常见替代字体 */
"Noto Sans", /* 国际化字体 */
"Liberation Sans", /* Linux 系统的替代字体 */
sans-serif; /* 默认字体 */
}
html.dark body{
background-color: var(--bg-color-solid);
color: var(--text-color);
}
#app {
height: 100%;
width: 100%;
overflow: hidden;
}
@media screen and (max-width: 500px) {
.pconly {
display: none;
}
@keyframes enter {
0% {
translate: 100px 0;
opacity: 0;
}
100% {
translate: 0 0;
opacity: 1;
}
}
}
@media screen and (min-width: 500px) {
.mbonly {
display: none;
}
@keyframes enter {
0% {
translate: 100px 0;
opacity: 0;
/* filter: blur(20px); */
}
100% {
translate: 0 0;
opacity: 1;
/* filter: blur(0px); */
}
}
}
#app {
@@ -43,6 +53,7 @@
html {
--bg-color-solid: #e8e8e8;
--bg-color: #ffffffae;
--bg-color-acrylic:#ffffff54;
--text-color: #464646;
--bd-color: #bbbbbb99;
}
@@ -50,16 +61,16 @@ html {
html.dark {
--bg-color-solid: #191919;
--bg-color: #2a2a2a88;
--bg-color-acrylic:rgba(42, 42, 42, 0.263);
--text-color: #c0c0c0;
--bd-color: #7f7f7f7c;
--navi-bg-color: #131313e2;
}
.container {
height: calc(100% - 20px);
width: calc(100% - 20px);
/* padding: 20px; */
animation: enter ease-out 0.6s backwards;
height: 100%;
width: 100%;
box-sizing: border-box;
}
.colbox {
@@ -78,7 +89,6 @@ html.dark {
padding: 20px;
margin: 10px;
color: var(--text-color);
transition: 0.5s;
}
.card:hover {
+155
View File
@@ -0,0 +1,155 @@
/* Markdown Typography */
.markdown {
line-height: 1.6;
color: #333;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
/* Headings */
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
/* margin-top: 1.5em; */
margin-bottom: 0.5em;
font-weight: 600;
line-height: 1.25;
}
.markdown h1 {
font-size: 2.5em;
border-bottom: 1px solid var(--bd-color);
padding-bottom: 0.3em;
}
.markdown h2 {
font-size: 1.75em;;
padding-bottom: 0.3em;
}
.markdown h3 {
font-size: 1.25em;
}
.markdown h4 {
font-size: 1em;
}
.markdown h5 {
font-size: 0.875em;
}
.markdown h6 {
font-size: 0.85em;
color: #6a737d;
}
/* Lists */
.markdown ul,
.markdown ol {
padding-left: 2em;
margin-top: 0.5em;
margin-bottom: 1em;
}
.markdown ul {
list-style-type: disc;
}
.markdown ol {
list-style-type: decimal;
}
.markdown li {
margin-bottom: 0.25em;
}
.markdown li > ul,
.markdown li > ol {
margin-top: 0.25em;
margin-bottom: 0.5em;
}
/* Paragraphs and spacing */
.markdown p {
margin-top: 0;
margin-bottom: 1em;
}
/* Links */
.markdown a {
text-decoration: none;
}
.markdown a:hover {
text-decoration: underline;
}
/* Code blocks */
.markdown pre {
background-color: #f6f8fa;
border-radius: 3px;
padding: 16px;
overflow: auto;
margin-bottom: 1em;
}
.markdown code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
background-color: var(--bg-color-solid);
border-radius: 3px;
padding: 0.2em 0.4em;
font-size: 85%;
}
.markdown pre code {
background-color: transparent;
padding: 0;
}
/* Blockquotes */
.markdown blockquote {
margin-left: 0;
padding: 0 1em;
color: var(--text-color);
border-left: 0.25em solid var(--bd-color);
}
/* Tables */
.markdown table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1em;
}
.markdown table th,
.markdown table td {
padding: 6px 13px;
border: 1px solid var(--bd-color);
}
.markdown table tr {
background-color: var(--bg-color-solid);
border-top: 1px solid var(--bd-color);
}
.markdown table tr:nth-child(2n) {
background-color: var(--bg-color-solid);
}
/* Horizontal rule */
.markdown hr {
height: 0.25em;
padding: 0;
margin: 24px 0;
background-color: var(--bg-color-solid);
border: 0;
}
/* Images */
.markdown img {
max-width: 100%;
box-sizing: border-box;
}
+2
View File
@@ -0,0 +1,2 @@
declare const __BUILD_TIME__: string;
declare const __APP_VERSION__: string;
+74 -44
View File
@@ -1,32 +1,38 @@
<template>
<div class="container rowbox" style="height: calc(100% - 65px); align-items: center;width: 100%;overflow: auto;">
<div class="colbox" style="width: 95%;margin-top: 10px;">
<div style="flex-grow: 2;margin:30px;" class="rowbox">
<div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
<div id="title">wordIn</div>
<div>当前版本: 1.02 <br/> 更新时间:2025年3月6日 10:35 PM</div>
</div>
<div style="flex-grow: 1;align-items: center;" class="colbox card">
<router-link to="/select" class="button">
开始新背诵
</router-link>
<router-link to="/manage" class="button">
查看单词本
</router-link>
</div>
</div>
<div id="history" class="wrapper">
<div class="title" style="margin-left: 20px;margin-top: 10px;width: 95%;">历史记录</div>
<div class="card colbox history-item" v-for="(history, index) in store.history._content" :key="index">
<div class="home-view-container">
<DynamicBackground class="home-view-header">
<template #content>
<div class="colbox" style="width: 95%;margin-top: 10px;">
<div style="flex-grow: 2;margin:30px;" class="rowbox">
<div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
<div id="title">wordIn</div>
<div>当前版本: {{ appVersion }} <br /> 更新时间: {{ buildTime }}</div>
</div>
<div class="colbox card home-view-option-wrapper">
<router-link to="/select" class="button">
开始新背诵
</router-link>
<router-link to="/manage" class="button">
查看单词本
</router-link>
</div>
</div>
</template>
</DynamicBackground>
<div class="wrapper home-view-history">
<div class="home-view-history-title" style="margin-left: 20px;margin-top: 10px;width: 95%;">历史记录</div>
<div class="home-view-history-item" v-for="(history, index) in store.history._content" :key="index">
<div class="card colbox" >
<div style="width: 25px;">{{ index + 1 }}</div>
<div style="width: 200px;">背诵进度: {{ history.current }}/{{ history.total || "Unknown" }}</div>
<div style="flex-grow: 1;"> {{ (new Date(history.modified)) }}</div>
<el-button @click="restart(index)">继续</el-button>
</div>
</div>
</div>
</div>
<div id="setting">
<box-icon class="btn" color="var(--text-color)" name='cog' @click="open_setting_dialog"></box-icon>
<v-icon class="btn" @click="open_setting_dialog">mdi-cog</v-icon>
</div>
<el-dialog v-model="settingVisible" title="设置" width="75%">
<div class="title">更换自定义背景</div>
@@ -39,8 +45,13 @@
<script setup lang="ts">
import { useMainStore } from '@/store';
import { ref} from 'vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import DynamicBackground from '@/components/DynamicBackground.vue';
import animejs from 'animejs';
const appVersion = __APP_VERSION__;
const buildTime = __BUILD_TIME__;
const store = useMainStore();
const router = useRouter();
@@ -62,6 +73,21 @@ const restart = (index: number): void => {
query: { index }
});
};
onMounted(()=>{
animejs({
targets:".home-view-header",
translateY: [-50,0],
opacity: [0,1],
})
animejs({
targets:".home-view-history-title,.home-view-history-item",
translateX: [50,0],
opacity: [0,1],
delay: animejs.stagger(50),
})
})
</script>
<style scoped>
@@ -72,7 +98,7 @@ const restart = (index: number): void => {
text-shadow: #00000057 5px 5px 20px;
}
.title {
.home-view-history-title {
font-weight: 800;
color: var(--text-color);
font-size: 15px;
@@ -110,7 +136,7 @@ const restart = (index: number): void => {
margin-bottom: 15px;
}
.title {
.home-view-history-title {
font-weight: 600;
color: var(--text-color);
font-size: 35px;
@@ -134,22 +160,12 @@ const restart = (index: number): void => {
}
}
#history{
width: calc(95% - 20px);
flex-grow: 1;
}
.wrapper {
border: 1px solid var(--bd-color);
/* border: 1px solid var(--bd-color); */
border-radius: 5px;
margin-top: 10px;
}
.history-item {
margin: 20px;
padding: 15px;
}
#setting {
position: absolute;
right: 0;
@@ -186,16 +202,30 @@ html.dark .button {
.button:hover {
box-shadow: var(--el-box-shadow) inset #00000017 0px 500px;
}
</style>
#ball {
background-image: linear-gradient(120deg, #e0c3fcca 0%, #8ec5fcc4 100%);
border-radius: 100%;
position: absolute;
animation: enter .8s ease-out;
box-shadow: #e0c3fcca 0px 0px 50px 10px;
z-index: -1;
<style>
.home-view-history {
width: 100%;
padding: 20px;
padding-top: 10px;
box-sizing: border-box;
flex-grow: 1;
overflow: hidden;
}
html.bgimged #ball {
backdrop-filter: blur(20px);
}</style>
.home-view-container{
height: 100%;
align-items: center;
width: 100%;
overflow: auto;
}
.home-view-option-wrapper{
flex-grow: 1;
align-items: center;
justify-content: center;
background-color: var(--bg-color-acrylic);
}
</style>
+9 -9
View File
@@ -1,18 +1,18 @@
<template>
<div class="container" style="overflow: auto;">
<el-page-header style="margin: 10px;" @back="router.push('/manage');">
<template #content>
<span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
</template>
<template #extra>
<template #content>
<span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
</template>
<template #extra>
<el-dropdown trigger="click">
<el-button>
操作<box-icon color="var(--text-color)" name='chevron-down' size="20px"></box-icon>
操作<v-icon size="20px">mdi-chevron-down</v-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="download"><box-icon color="var(--text-color)" name='download'
size="20px"></box-icon>下载</el-dropdown-item>
<el-dropdown-item @click="download"><v-icon
size="20px">mdi-download</v-icon>下载</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@@ -68,7 +68,7 @@ onMounted(() => {
book.value = route.query.book as string;
id.value = route.query.id as string;
name.value = (route.query.name as string) || "default";
if (set.value && book.value && id.value) {
axios.get("wordset/detail", {
params: {
@@ -113,7 +113,7 @@ onMounted(() => {
padding-top: 0;
}
#main{
#main {
height: calc(100% - 50px);
}
+39 -22
View File
@@ -1,20 +1,19 @@
<template>
<div class="container" style="overflow: auto;">
<el-page-header style="margin: 10px;" @back="router.push('/manage');">
<div class="container editor-container">
<el-page-header class="editor-header editor-animation-el" @back="router.push('/manage');">
<template #content>
<span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
</template>
<template #extra>
<el-dropdown trigger="click">
<el-button>
操作<box-icon color="var(--text-color)" name='chevron-down' size="20px"></box-icon>
操作<v-icon size="20px">mdi-chevron-down</v-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="del_set"><box-icon color="var(--text-color)" name='trash'
size="20px"></box-icon>删除</el-dropdown-item>
<el-dropdown-item @click="addTo"><box-icon color="var(--text-color)" name='plus'
size="18px"></box-icon>添加到</el-dropdown-item>
<el-dropdown-item @click="del_set"><v-icon size="20px">mdi-delete</v-icon>删除</el-dropdown-item>
<el-dropdown-item @click="addTo"><v-icon
size="18px">mdi-plus</v-icon>添加到</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@@ -22,7 +21,7 @@
</el-page-header>
<div class="colbox" id="main">
<div class="rowbox">
<div class="card">
<div class="card editor-animation-el">
<div class="title">添加单词</div>
<el-input ref="input1" autofocus @change="focusnext($refs.input2)"
v-model="new_word.word"></el-input>
@@ -39,7 +38,7 @@
</div>
<el-button @click="add_word()" type="primary">添加</el-button>
</div>
<div class="card">
<div class="card editor-animation-el">
<div class="title">更改名称</div>
<div class="colbox">
<el-text class="mx-1" style="width: 60px;">新名称:</el-text>
@@ -48,7 +47,7 @@
<el-button @click="change_name()" type="primary">更改名称</el-button>
</div>
</div>
<div style="flex-grow: 1;" class="card">
<div class="card editor-wordlist editor-animation-el">
<el-table :data="table" style="height: calc(100% - 10px);overflow: auto;border-radius: 10px;">
<el-table-column type="index" />
<el-table-column prop="word" label="单词" />
@@ -57,10 +56,9 @@
<el-table-column width="100px" fixed="right" label="操作">
<template #default="scope">
<div style="display: flex;flex-direction: row;justify-content: space-around;">
<box-icon color="var(--text-color)" size="14px" class="btn" name='trash'
@click="del_word(scope.$index)"></box-icon>
<box-icon color="var(--text-color)" size="14px" class="btn" name='edit-alt'
@click="edit_word(scope.$index)"></box-icon>
<v-icon size="14px" class="btn" @click="del_word(scope.$index)">mdi-delete</v-icon>
<v-icon size="14px" class="btn" name='edit-alt'
@click="edit_word(scope.$index)">mdi-invoice-text-edit</v-icon>
</div>
</template>
</el-table-column>
@@ -112,6 +110,7 @@ import { useRouter, useRoute } from 'vue-router'
import { useMainStore } from '@/store'
import { ElMessage, ElMessageBox } from 'element-plus'
import CDialog from '@/components/UI/CDialog.vue'
import anime from 'animejs'
const router = useRouter()
const route = useRoute()
@@ -276,9 +275,33 @@ onMounted(() => {
}
table.value = wordsets.value.getSet(id.value)
}
anime({
targets: '.editor-animation-el',
translateY: [-50, 0],
opacity: [0, 1],
delay: anime.stagger(50),
});
})
</script>
<style>
.editor-container{
height: 100%;
width: 100%;
padding: 10px;
overflow: hidden;
padding-top: 0;
box-sizing: border-box;
}
.editor-wordlist{
flex-grow: 1;
height: calc(100% - 60px);
}
.editor-header{
margin: 10px;
}
</style>
<style scoped>
@media screen and (max-width: 500px) {
#main {
@@ -297,20 +320,14 @@ onMounted(() => {
font-size: 35px;
min-height: 60px;
}
.container {
padding: 10px;
height: calc(100% - 70px);
padding-top: 0;
}
}
#main {
height: calc(100% - 50px);
height: 100%;
}
#main-container {
height: 87%;
height: 100%;
}
.title {
+18 -3
View File
@@ -1,10 +1,10 @@
<template>
<el-page-header style="margin: 20px;" @back="$router.push('/manage')">
<el-page-header class="new-set-header new-set-animation-el"@back="$router.push('/manage')">
<template #content>
<span class="text-large font-600 mr-3"> 新建单词本 </span>
</template>
</el-page-header>
<el-container id="main-container" class="container card">
<el-container id="main-container" class="container card new-set-animation-el">
<div style="overflow: auto;">
<div class="colbox">
<div class="mid-text">名称:</div>
@@ -20,10 +20,11 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { useMainStore } from '@/store'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import anime from 'animejs'
const store = useMainStore()
const router = useRouter()
@@ -42,8 +43,22 @@ const new_wordset = () => {
store.wordsets.addSet(new_set_class.value, set_name.value)
router.push('/manage')
}
onMounted(() => {
anime({
targets: '.new-set-animation-el',
translateY: [-50, 0],
opacity: [0, 1],
})
})
</script>
<style>
.new-set-header {
margin: 20px;
}
</style>
<style scoped>
@media screen and (max-width: 500px) {
.colbox {
+109 -97
View File
@@ -1,27 +1,27 @@
<template>
<el-container id="main-container">
<el-header id="header" style="">
<el-header class="list-view-header" style="">
<el-page-header style="margin: 10px;" @back="router.push('/');">
<template #content>
<span class="text-large font-600 mr-3"> 编辑单词本 </span>
</template>
<template #extra>
<div class="colbox">
<el-button @click="$router.push('/manage/new')" type="success"><box-icon color="white"
name='plus'></box-icon>新建单词本</el-button>
<el-button @click="$router.push('/manage/new')"
type="success"><v-icon>mdi-plus</v-icon>新建单词本</el-button>
<div class="pconly">
<el-dropdown trigger="click" style="margin-left: 20px;">
<el-button type="primary">
更多<box-icon color="white" name='chevron-down' size="20px"></box-icon>
更多<v-icon size="20px">mdi-chevron-down</v-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="manage_online_wordsets"><box-icon color="white"
name='world' size="20px"></box-icon>管理在线单词本</el-dropdown-item>
<el-dropdown-item @click="export_set"><box-icon color="white" name='export'
size="18px"></box-icon>导出</el-dropdown-item>
<el-dropdown-item @click="import_set"><box-icon color="white" name='import'
size="18px"></box-icon>导入</el-dropdown-item>
<el-dropdown-item @click="manage_online_wordsets"><v-icon
size="20px">mdi-earth</v-icon>管理在线单词本</el-dropdown-item>
<el-dropdown-item @click="export_set"><v-icon
size="18px">mdi-export</v-icon>导出</el-dropdown-item>
<el-dropdown-item @click="import_set"><v-icon color="white" name=''
size="18px">mdi-import</v-icon>导入</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@@ -30,8 +30,8 @@
</template>
</el-page-header>
</el-header>
<el-container style="height:calc(100% - 200px);position: relative;">
<el-aside id="aside">
<el-container style="height:calc(100% - 60px);position: relative;">
<el-aside class="list-view-aside">
<div id="sidebar" class="sidebar-hidden">
<div id="sidebar-content">
<div class="sidebar-title">
@@ -52,7 +52,7 @@
</div>
</div>
<div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
<box-icon name='list-ul' color="var(--text-color)"></box-icon>
<v-icon>mdi-format-list-bulleted</v-icon>
</div>
</div>
</el-aside>
@@ -71,10 +71,8 @@
创建日期:{{ (new Date(wordset.created)).toLocaleString() }}
</div>
<div class="option">
<box-icon class="btn" name='edit' color="var(--text-color)"
@click="edit(wordset.id)"></box-icon>
<box-icon class="btn" name='trash' color="var(--text-color)"
@click="del(view_wordsets, wordset.id, index)"></box-icon>
<v-icon class="btn" @click="edit(wordset.id)">mdi-book-edit</v-icon>
<v-icon class="btn" @click="del(view_wordsets, wordset.id, index)">mdi-delete</v-icon>
</div>
</div>
</div>
@@ -88,8 +86,7 @@
创建日期:{{ (new Date(wordset.created)).toLocaleString() }}
</div>
<div class="option">
<box-icon class="btn" name='show' color="var(--text-color)"
@click="show(String(index), wordset.name)"></box-icon>
<v-icon class="btn" @click="show(String(index), wordset.name)">mdi-eye</v-icon>
</div>
</div>
</div>
@@ -100,11 +97,12 @@
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store';
import axios from 'axios';
import anime from 'animejs';
interface WordSet {
id: string;
@@ -115,7 +113,7 @@ interface WordSet {
interface OnlineWordSets {
[set: string]: {
[book: string]: {
[id:string]:WordSet
[id: string]: WordSet
}
}
}
@@ -124,41 +122,45 @@ const router = useRouter();
const store = useMainStore();
// Convert data properties to refs/reactive
const view_wordsets = ref < string > ("");
const viewing = reactive < {
const view_wordsets = ref<string>("");
const viewing = reactive<{
set: string;
book: string;
} > ({
}>({
set: "",
book: "",
});
const online_wordsets = ref < OnlineWordSets > ({});
const mode = ref < number > (0);
const online_wordsets = ref<OnlineWordSets>({});
const mode = ref<number>(0);
// Convert methods to functions
const view = (classname: string): void => {
mode.value = 0;
view_wordsets.value = classname;
let node = document.getElementById("wordsets-container")?.style;
if (node) {
node.animation = "";
setTimeout(() => {
node.animation = "enter ease-out .6s backwards";
}, 0);
}
close_sidebar();
nextTick(() => {
anime({
targets: ".wordset",
translateY: [-50, 0],
opacity: [0, 1],
delay: anime.stagger(50, { grid: [6, 6] })
})
})
};
const view_online = (set_name: string, class_name: string): void => {
mode.value = 1;
viewing.set = set_name;
viewing.book = class_name;
let node = document.getElementById("wordsets-container")?.style;
if (node) {
node.animation = "";
setTimeout(() => {
node.animation = "enter ease-out .6s backwards";
}, 0);
}
close_sidebar();
nextTick(() => {
anime({
targets: ".wordset",
translateY: [-50, 0],
opacity: [0, 1],
delay: anime.stagger(50, { grid: [6, 6] })
})
})
};
const manage_online_wordsets = (): void => {
@@ -210,24 +212,41 @@ const import_set = async (): Promise<void> => {
const taggle_sidebar = (): void => {
let node = document.getElementById("sidebar");
let class_name = "sidebar-hidden";
if (node?.classList.contains(class_name)) {
node.classList.remove(class_name);
if (node) {
if (node.classList.contains(class_name)) {
node.classList.remove(class_name);
}
}
else if (node) {
node.classList.add(class_name);
};
const close_sidebar = (): void => {
let node = document.getElementById("sidebar");
let class_name = "sidebar-hidden";
if (node) {
if (!node.classList.contains(class_name)) {
node.classList.add(class_name);
}
}
};
// Convert created lifecycle hook to onMounted
onMounted(() => {
anime({
targets: ".list-view-header",
translateY: [-50, 0],
opacity: [0, 1],
});
anime({
targets: ".list-view-aside",
translateX: [-50, 0],
opacity: [0, 1],
});
let first_set = store.wordsets._firstClass;
if (first_set) {
setTimeout(() => {
view(first_set);
}, 0);
view(first_set);
}
axios.get < OnlineWordSets > ("wordset/list").then(
axios.get<OnlineWordSets>("wordset/list").then(
(res) => {
online_wordsets.value = res.data;
}
@@ -235,35 +254,45 @@ onMounted(() => {
});
</script>
<style scoped>
<style>
@media screen and (max-width: 500px) {
@keyframes sidebar-enter {
0% {
translate: -100px 0;
opacity: 0;
}
100% {
translate: 0 0;
opacity: 1;
}
.list-view-header {
height: 60px;
}
#header {
height: 70px;
}
#aside {
.list-view-aside {
width: 0;
position: relative;
}
}
@media screen and (min-width: 500px) {
.list-view-header {
height: 60px;
}
.list-view-aside {
width: 180px;
}
}
.list-view-aside {
z-index: 1000;
}
.list-view-header {
justify-content: space-between;
animation: enter ease-out .6s backwards;
}
</style>
<style scoped>
@media screen and (max-width: 500px) {
#sidebar {
position: absolute;
width: 180px;
margin-top: 20px;
transition: .5s;
z-index: 100;
}
.sidebar-hidden {
@@ -306,7 +335,7 @@ onMounted(() => {
#show-sidebar {
position: absolute;
display: flex;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
@@ -322,8 +351,13 @@ onMounted(() => {
backdrop-filter: blur(10px);
}
.sidebar-hidden #show-sidebar {
display: flex;
}
#wordsets-container {
width: 100%;
box-sizing: border-box;
display: flex;
transition: .5s;
}
@@ -334,29 +368,8 @@ onMounted(() => {
}
@media screen and (min-width: 500px) {
@keyframes sidebar-enter {
0% {
translate: -100px 0;
opacity: 0;
}
100% {
translate: 0 0;
opacity: 1;
}
}
#header {
height: 60px;
}
#aside {
width: 180px;
}
#sidebar {
width: 180px;
animation: sidebar-enter ease-out .6s backwards;
padding-left: 10px;
margin: 10px;
}
@@ -364,7 +377,7 @@ onMounted(() => {
.wordset {
border-radius: 13px;
padding: 20px;
height: 220px;
height: 230px;
width: 170px;
margin: 20px;
}
@@ -398,8 +411,8 @@ onMounted(() => {
.wordset {
background-color: var(--bg-color);
color: var(--text-color);
transition: .5s;
border: solid 1px var(--bd-color);
opacity: 0;
}
.wordset:hover {
@@ -409,7 +422,8 @@ onMounted(() => {
#sidebar {
background-color: var(--bg-color-solid);
border-radius: 5px;
height: calc(100% - 100px);
height: calc(100% - 20px);
box-sizing: border-box;
border: 1px solid var(--bd-color);
transition: .5s;
}
@@ -457,18 +471,16 @@ html.bgimged .wordset {
justify-content: space-around;
opacity: 0;
transition: .5s;
}
#header {
/* border-bottom: solid 1px #bcbcbc; */
justify-content: space-between;
animation: enter ease-out .6s backwards;
margin: 10px;
}
#wordsets-container {
overflow-x: auto;
height: calc(100% - 60px);
height: 100%;
box-sizing: border-box;
padding-bottom: 20px;
position: relative;
z-index: 1;
}
#main-container {
+15 -2
View File
@@ -1,11 +1,22 @@
<template>
<div id="wrapper" class="rowbox container">
<Post id="post"/>
<Post class="markdown" id="post"/>
</div>
</template>
<script setup lang="ts">
import Post from '@/md/about.md';
import '@/styles/markdown.css';
import anime from 'animejs';
import { onMounted } from 'vue';
onMounted(() => {
anime({
targets: '#post',
translateY: [-50, 0],
opacity: [0, 1],
});
});
</script>
<style scoped>
@@ -22,7 +33,9 @@ import Post from '@/md/about.md';
}
#wrapper {
height:calc(100% - 80px);
height: 100%;
box-sizing: border-box;
padding-bottom: 20px;
width: 100%;
align-items: center;
overflow: auto;
+15 -2
View File
@@ -1,11 +1,22 @@
<template>
<div id="wrapper" class="rowbox container">
<Post id="post"/>
<Post class="markdown" id="post"/>
</div>
</template>
<script setup lang="ts">
import Post from '@/md/manual.md';
import '@/styles/markdown.css';
import anime from 'animejs';
import { onMounted } from 'vue';
onMounted(() => {
anime({
targets: '#post',
translateY: [-50, 0],
opacity: [0, 1],
});
});
</script>
<style scoped>
@@ -22,7 +33,9 @@ import Post from '@/md/manual.md';
}
#wrapper {
height:calc(100% - 90px);
height: 100%;
box-sizing: border-box;
padding-bottom: 20px;
width: 100%;
align-items: center;
overflow: auto;
+19 -5
View File
@@ -1,12 +1,12 @@
<template>
<div>
<el-page-header style="margin-top:20px;margin-left:20px" @back="$router.push('/')">
<el-page-header class="recite-view-header recite-view-animation-el" @back="$router.push('/')">
<template #content>
<span class="text-large font-600 mr-3"> 背诵 </span>
</template>
</el-page-header>
<div id="test" class="colbox">
<div style="flex-grow: 1;" class="card">
<div style="flex-grow: 1;" class="card recite-view-animation-el">
<div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
<div>
<textarea autofocus id="input" ref="inputAreaRef" v-if="current === answered" @input="change"
@@ -20,12 +20,12 @@
<el-button v-if="current === answered" @click="showAnswer">显示答案</el-button>
<el-button v-if="current === answered" type="warning" @click="skip">跳过</el-button>
<el-button @click="terminate" type="danger">停止背诵</el-button>
<box-icon color="var(--text-color)" class="btn" style="margin-left: 10px;translate: 0 4px;"
@click="audio_play" name='volume-full'></box-icon>
<v-icon style="margin-left: 10px;translate: 0 4px;"
@click="audio_play">mdi-volume-high</v-icon>
</div>
<div id="trans">{{ word.type }} {{ word.trans }}</div>
</div>
<div id="add-to-box" class="card">
<div id="add-to-box" class="card recite-view-animation-el">
<el-text class="mx-1 title">加入至</el-text>
<div class="colbox para">
<div class="mid-text">分组:</div>
@@ -52,6 +52,7 @@ import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
import { useMainStore } from '@/store';
import { WordItem } from '@/types';
import anime from 'animejs';
const router = useRouter();
const route = useRoute();
@@ -303,6 +304,12 @@ onMounted(() => {
});
router.push('/select');
});
anime({
targets: '.recite-view-animation-el',
translateY: [-50, 0],
opacity: [0, 1],
delay: anime.stagger(50),
});
});
onBeforeUnmount(() => {
@@ -310,6 +317,13 @@ onBeforeUnmount(() => {
});
</script>
<style>
.recite-view-header {
margin-top:20px;
margin-left:20px
}
</style>
<style scoped>
@media screen and (max-width: 500px) {
+20 -8
View File
@@ -1,16 +1,15 @@
<template>
<div class="container" id="page">
<el-page-header @back="router.push('/');"
style="width: calc(100% - 30px);margin-left: 30px;margin-top: 5px;">
<el-page-header class="recite-select-animation-el recite-select-header" @back="router.push('/');">
<template #content>
<span class="text-large font-600 mr-3">开始新背诵</span>
</template>
</el-page-header>
<el-steps style="width: 100%;" align-center :active="step">
<el-steps class="recite-select-animation-el" style="width: 100%;" align-center :active="step">
<el-step title="选择单词本" description="选择在线或本地单词本以开始背诵"></el-step>
<el-step title="自定义背诵" description="您可以在此处更改背诵设置"></el-step>
</el-steps>
<div id="main" class="card" style="overflow: hidden;">
<div id="main" class="card recite-select-animation-el">
<div class="item" id="select-area" v-show="step === 1">
<el-tabs style="height: calc(100% - 40px);position: relative;overflow: hidden;">
<el-tab-pane label="本地">
@@ -19,7 +18,7 @@
<el-checkbox-group v-model="local.checkedSets" @change="(res: string[]) => { handleChange(local, res) }">
<div class="set_radios" v-for="(set_class, set_class_name) in store.wordsets._inner"
:key="set_class_name">
<p>{{ set_class_name }}</p>
<p class="mb-4 mt-2">{{ set_class_name }}</p>
<el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id"
size="large" border>
<div style="font-size: 18px;font-weight: 500;">
@@ -37,7 +36,7 @@
<div class="set_radios" v-for="(set, set_name) in online_sets" :key="set_name">
<div class="subtitle">{{ set_name }}</div>
<div v-for="(book, book_name) in set" :key="book_name">
<p>{{ book_name }}</p>
<p class="mb-4 mt-2">{{ book_name }}</p>
<el-checkbox class="checkbox" v-for="(config, id) in book" :key="id" :label="id"
size="large" border>
<div style="font-size: 18px;font-weight: 500;">
@@ -91,6 +90,7 @@ import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store';
import axios from '@/scripts/request';
import anime from 'animejs';
const router = useRouter();
const store = useMainStore();
@@ -214,6 +214,12 @@ onMounted(() => {
type: "error"
});
});
anime({
targets: ".recite-select-animation-el",
translateY: [-50, 0],
opacity: [0, 1],
delay: anime.stagger(50),
})
});
</script>
@@ -239,7 +245,6 @@ onMounted(() => {
align-items: center;
display: flex;
flex-direction: column;
margin-top: 10px;
}
.subtitle {
@@ -261,8 +266,9 @@ onMounted(() => {
#main {
margin-top: 10px;
height: calc(100% - 250px);
height: calc(100% - 60px);
width: 90%;
overflow: hidden;
}
.item {
@@ -298,6 +304,12 @@ onMounted(() => {
height: calc(100% - 50px);
}
.recite-select-header {
width: calc(100% - 30px);
margin-left: 30px;
margin-top: 15px;
}
@keyframes exitLeft {
0% {
opacity: 1;
+13 -2
View File
@@ -7,14 +7,21 @@ import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Markdown from 'unplugin-vue-markdown/vite'
const now = new Date();
const buildTime = now.toLocaleString('zh-CN');
export default defineConfig({
base: './',
build: {
outDir: 'page',
},
define: {
__BUILD_TIME__: JSON.stringify(buildTime),
__APP_VERSION__: JSON.stringify('1.03 beta1')
},
plugins: [
vue({
include: [/\.vue$/, /\.md$/],
include: [ /\.vue$/,/\.md$/],
}),
vuetify({
autoImport: true,
@@ -35,7 +42,11 @@ export default defineConfig({
},
server: {
proxy: {
'/': {
'/wordset': {
target: 'https://app.cast1e.top/wordin',
changeOrigin: true,
},
'/upload': {
target: 'https://app.cast1e.top/wordin',
changeOrigin: true,
},