complete main function

wallitor-gui/package.json

@@ -16,8 +16,11 @@
     "@tauri-apps/api": "2.0.0-rc.0",
     "@tauri-apps/plugin-dialog": "^2.0.0",
     "@tauri-apps/plugin-fs": "2.0.0-rc.2",
+    "element-plus": "^2.8.5",
+    "unplugin-element-plus": "^0.8.0",
     "vue": "^3.4.29",
-    "vue-router": "^4.3.3"
+    "vue-router": "^4.3.3",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",

wallitor-gui/pnpm-lock.yaml

@@ -17,12 +17,21 @@ importers:
       '@tauri-apps/plugin-fs':
         specifier: 2.0.0-rc.2
         version: 2.0.0-rc.2
+      element-plus:
+        specifier: ^2.8.5
+        version: 2.8.5(vue@3.5.8(typescript@5.4.5))
+      unplugin-element-plus:
+        specifier: ^0.8.0
+        version: 0.8.0(rollup@4.22.4)
       vue:
         specifier: ^3.4.29
         version: 3.5.8(typescript@5.4.5)
       vue-router:
         specifier: ^4.3.3
         version: 4.4.5(vue@3.5.8(typescript@5.4.5))
+      vuex:
+        specifier: ^4.0.2
+        version: 4.0.2(vue@3.5.8(typescript@5.4.5))
     devDependencies:
       '@rushstack/eslint-patch':
         specifier: ^1.8.0
@@ -229,6 +238,15 @@ packages:
     resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
     engines: {node: '>=6.9.0'}
 
+  '@ctrl/tinycolor@3.6.1':
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
+    engines: {node: '>=10'}
+
+  '@element-plus/icons-vue@2.3.1':
+    resolution: {integrity: sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==}
+    peerDependencies:
+      vue: ^3.2.0
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -385,6 +403,15 @@ packages:
     resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@floating-ui/core@1.6.8':
+    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+
+  '@floating-ui/dom@1.6.11':
+    resolution: {integrity: sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==}
+
+  '@floating-ui/utils@0.2.8':
+    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+
   '@humanwhocodes/config-array@0.13.0':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
     engines: {node: '>=10.10.0'}
@@ -536,6 +563,9 @@ packages:
   '@rushstack/eslint-patch@1.10.4':
     resolution: {integrity: sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==}
 
+  '@sxzz/popperjs-es@2.11.7':
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
+
   '@tauri-apps/api@2.0.0-rc.0':
     resolution: {integrity: sha512-v454Qs3REHc3Za59U+/eSmBsdmF+3NE5+76+lFDaitVqN4ZglDHENDaMARYKGJVZuxiSkzyqG0SeG7lLQjVkPA==}
     engines: {node: '>= 18.18', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
@@ -634,12 +664,21 @@ packages:
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.10':
+    resolution: {integrity: sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ==}
+
   '@types/node@20.16.7':
     resolution: {integrity: sha512-QkDQjAY3gkvJNcZOWwzy3BN34RweT0OQ9zJyvLCU0kSK22dO2QYh/NHGfbEAYylPYzRB1/iXcojS79wOg5gFSw==}
 
   '@types/svgo@2.6.4':
     resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
 
+  '@types/web-bluetooth@0.0.16':
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+
   '@typescript-eslint/eslint-plugin@7.18.0':
     resolution: {integrity: sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==}
     engines: {node: ^18.18.0 || >=20.0.0}
@@ -807,6 +846,15 @@ packages:
   '@vue/tsconfig@0.5.1':
     resolution: {integrity: sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==}
 
+  '@vueuse/core@9.13.0':
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+
+  '@vueuse/metadata@9.13.0':
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+
+  '@vueuse/shared@9.13.0':
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -879,6 +927,9 @@ packages:
     resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
     engines: {node: '>=0.10.0'}
 
+  async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+
   atob@2.1.2:
     resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
     engines: {node: '>= 4.5.0'}
@@ -1049,6 +1100,9 @@ packages:
     resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==}
     engines: {node: '>= 0.4'}
 
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
@@ -1144,6 +1198,11 @@ packages:
   electron-to-chromium@1.5.28:
     resolution: {integrity: sha512-VufdJl+rzaKZoYVUijN13QcXVF5dWPZANeFTLNy+OSpHdDL5ynXTF35+60RSBbaQYB1ae723lQXHCrf4pyLsMw==}
 
+  element-plus@2.8.5:
+    resolution: {integrity: sha512-Px+kPbRTVvn5oa5+9saa7QEOnUweKXm0JVI7yJHzKF/doQGixwcFMsQEF2+3Fy62EA/7dRRKVuhsNGGZYNk3cw==}
+    peerDependencies:
+      vue: ^3.2.0
+
   emojis-list@3.0.0:
     resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
     engines: {node: '>= 4'}
@@ -1173,6 +1232,9 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-module-lexer@1.5.4:
+    resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
+
   es-object-atoms@1.0.0:
     resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
     engines: {node: '>= 0.4'}
@@ -1194,6 +1256,9 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
   escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -1750,6 +1815,16 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
+  lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+
+  lodash-unified@1.0.3:
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
+    peerDependencies:
+      '@types/lodash-es': '*'
+      lodash: '*'
+      lodash-es: '*'
+
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
@@ -1773,6 +1848,9 @@ packages:
   mdn-data@2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
 
+  memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+
   memorystream@0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
@@ -1845,6 +1923,9 @@ packages:
   node-releases@2.0.18:
     resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
 
+  normalize-wheel-es@1.2.0:
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
+
   npm-normalize-package-bin@3.0.1:
     resolution: {integrity: sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -2356,6 +2437,19 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
+  unplugin-element-plus@0.8.0:
+    resolution: {integrity: sha512-jByUGY3FG2B8RJKFryqxx4eNtSTj+Hjlo8edcOdJymewndDQjThZ1pRUQHRjQsbKhTV2jEctJV7t7RJ405UL4g==}
+    engines: {node: '>=14.19.0'}
+
+  unplugin@1.14.1:
+    resolution: {integrity: sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      webpack-sources: ^3
+    peerDependenciesMeta:
+      webpack-sources:
+        optional: true
+
   unset-value@1.0.0:
     resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
     engines: {node: '>=0.10.0'}
@@ -2449,6 +2543,17 @@ packages:
   vscode-uri@3.0.8:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-eslint-parser@9.4.3:
     resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -2474,6 +2579,14 @@ packages:
       typescript:
         optional: true
 
+  vuex@4.0.2:
+    resolution: {integrity: sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==}
+    peerDependencies:
+      vue: ^3.0.2
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
 
@@ -2716,6 +2829,12 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
+  '@ctrl/tinycolor@3.6.1': {}
+
+  '@element-plus/icons-vue@2.3.1(vue@3.5.8(typescript@5.4.5))':
+    dependencies:
+      vue: 3.5.8(typescript@5.4.5)
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -2808,6 +2927,17 @@ snapshots:
 
   '@eslint/js@8.57.1': {}
 
+  '@floating-ui/core@1.6.8':
+    dependencies:
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/dom@1.6.11':
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/utils@0.2.8': {}
+
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -2911,6 +3041,8 @@ snapshots:
 
   '@rushstack/eslint-patch@1.10.4': {}
 
+  '@sxzz/popperjs-es@2.11.7': {}
+
   '@tauri-apps/api@2.0.0-rc.0': {}
 
   '@tauri-apps/api@2.0.0-rc.6': {}
@@ -2976,6 +3108,12 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.10
+
+  '@types/lodash@4.17.10': {}
+
   '@types/node@20.16.7':
     dependencies:
       undici-types: 6.19.8
@@ -2984,6 +3122,8 @@ snapshots:
     dependencies:
       '@types/node': 20.16.7
 
+  '@types/web-bluetooth@0.0.16': {}
+
   '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.4.5))(eslint@8.57.1)(typescript@5.4.5)':
     dependencies:
       '@eslint-community/regexpp': 4.11.1
@@ -3237,6 +3377,25 @@ snapshots:
 
   '@vue/tsconfig@0.5.1': {}
 
+  '@vueuse/core@9.13.0(vue@3.5.8(typescript@5.4.5))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0(vue@3.5.8(typescript@5.4.5))
+      vue-demi: 0.14.10(vue@3.5.8(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@9.13.0': {}
+
+  '@vueuse/shared@9.13.0(vue@3.5.8(typescript@5.4.5))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.8(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   acorn-jsx@5.3.2(acorn@8.12.1):
     dependencies:
       acorn: 8.12.1
@@ -3296,6 +3455,8 @@ snapshots:
 
   assign-symbols@1.0.0: {}
 
+  async-validator@4.2.5: {}
+
   atob@2.1.2: {}
 
   available-typed-arrays@1.0.7:
@@ -3498,6 +3659,8 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.1
 
+  dayjs@1.11.13: {}
+
   de-indent@1.0.2: {}
 
   debug@2.6.9:
@@ -3590,6 +3753,27 @@ snapshots:
 
   electron-to-chromium@1.5.28: {}
 
+  element-plus@2.8.5(vue@3.5.8(typescript@5.4.5)):
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+      '@element-plus/icons-vue': 2.3.1(vue@3.5.8(typescript@5.4.5))
+      '@floating-ui/dom': 1.6.11
+      '@popperjs/core': '@sxzz/popperjs-es@2.11.7'
+      '@types/lodash': 4.17.10
+      '@types/lodash-es': 4.17.12
+      '@vueuse/core': 9.13.0(vue@3.5.8(typescript@5.4.5))
+      async-validator: 4.2.5
+      dayjs: 1.11.13
+      escape-html: 1.0.3
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+      vue: 3.5.8(typescript@5.4.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   emojis-list@3.0.0: {}
 
   entities@1.1.2: {}
@@ -3655,6 +3839,8 @@ snapshots:
 
   es-errors@1.3.0: {}
 
+  es-module-lexer@1.5.4: {}
+
   es-object-atoms@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -3699,6 +3885,8 @@ snapshots:
 
   escalade@3.2.0: {}
 
+  escape-html@1.0.3: {}
+
   escape-string-regexp@1.0.5: {}
 
   escape-string-regexp@4.0.0: {}
@@ -4279,6 +4467,14 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
+  lodash-es@4.17.21: {}
+
+  lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21):
+    dependencies:
+      '@types/lodash-es': 4.17.12
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+
   lodash.merge@4.6.2: {}
 
   lodash@4.17.21: {}
@@ -4299,6 +4495,8 @@ snapshots:
 
   mdn-data@2.0.14: {}
 
+  memoize-one@6.0.0: {}
+
   memorystream@0.3.1: {}
 
   merge-options@1.0.1:
@@ -4381,6 +4579,8 @@ snapshots:
 
   node-releases@2.0.18: {}
 
+  normalize-wheel-es@1.2.0: {}
+
   npm-normalize-package-bin@3.0.1: {}
 
   npm-run-all2@6.2.3:
@@ -4943,6 +5143,21 @@ snapshots:
 
   universalify@2.0.1: {}
 
+  unplugin-element-plus@0.8.0(rollup@4.22.4):
+    dependencies:
+      '@rollup/pluginutils': 5.1.2(rollup@4.22.4)
+      es-module-lexer: 1.5.4
+      magic-string: 0.30.11
+      unplugin: 1.14.1
+    transitivePeerDependencies:
+      - rollup
+      - webpack-sources
+
+  unplugin@1.14.1:
+    dependencies:
+      acorn: 8.12.1
+      webpack-virtual-modules: 0.6.2
+
   unset-value@1.0.0:
     dependencies:
       has-value: 0.3.1
@@ -5042,6 +5257,10 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
+  vue-demi@0.14.10(vue@3.5.8(typescript@5.4.5)):
+    dependencies:
+      vue: 3.5.8(typescript@5.4.5)
+
   vue-eslint-parser@9.4.3(eslint@8.57.1):
     dependencies:
       debug: 4.3.7
@@ -5077,6 +5296,13 @@ snapshots:
     optionalDependencies:
       typescript: 5.4.5
 
+  vuex@4.0.2(vue@3.5.8(typescript@5.4.5)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.8(typescript@5.4.5)
+
+  webpack-virtual-modules@0.6.2: {}
+
   which-boxed-primitive@1.0.2:
     dependencies:
       is-bigint: 1.0.4

wallitor-gui/src-tauri/.gitignore

@@ -6,3 +6,4 @@
 # will have schema files for capabilities auto-completion
 /gen/schemas
 resource/
+wallitor-core.dll

wallitor-gui/src-tauri/Cargo.lock

@@ -1795,7 +1795,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6e9ec52138abedcc58dc17a7c6c0c00a2bdb4f3427c7f63fa97fd0d859155caf"
 dependencies = [
  "gtk-sys",
- "libloading",
+ "libloading 0.7.4",
  "once_cell",
 ]
 
@@ -1815,6 +1815,16 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "libloading"
+version = "0.8.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4979f22fdb869068da03c9f7528f8297c6fd2606bc3a4affe42e6a823fdb8da4"
+dependencies = [
+ "cfg-if",
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "libredox"
 version = "0.1.3"
@@ -4038,6 +4048,7 @@ name = "wallitor-gui"
 version = "0.1.0"
 dependencies = [
  "chrono",
+ "libloading 0.8.5",
  "serde",
  "serde_json",
  "tauri",

wallitor-gui/src-tauri/Cargo.toml

@@ -5,6 +5,7 @@ description = "A Tauri App"
 authors = ["you"]
 edition = "2021"
 
+
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [lib]
@@ -15,7 +16,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2.0.0-rc", features = [] }
 
 [dependencies]
-tauri = { version = "2.0.0-rc", features = [] }
+tauri = { version = "2.0.0-rc", features = ["unstable"] }
 tauri-plugin-shell = "2.0.0-rc"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
@@ -23,4 +24,5 @@ window-vibrancy = "0.5.2"
 tauri-plugin-fs = "2.0.0-rc"
 tauri-plugin-dialog = "2.0.0-rc"
 chrono = "0.4.38"
+libloading = "0.8.5"
 

wallitor-gui/src-tauri/capabilities/default.json

@@ -3,5 +3,5 @@
   "identifier": "default",
   "description": "Capability for the main window",
   "windows": ["main"],
-  "permissions": ["core:default", "shell:allow-open", "dialog:allow-open", "dialog:default"]
+  "permissions": ["core:default", "shell:allow-open", "dialog:allow-open", "dialog:default","core:webview:allow-create-webview-window"]
 }

wallitor-gui/src-tauri/capabilities/video.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "video",
+  "description": "Capability for the main window",
+  "windows": ["wallitor_video_playback"],
+  "permissions": ["core:default", "shell:allow-open"]
+}

wallitor-gui/src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Capability for the main window","local":true,"windows":["main"],"permissions":["core:default","shell:allow-open","dialog:allow-open","dialog:default"]},"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-maximize","core:window:allow-unmaximize","core:window:allow-toggle-maximize","core:window:allow-minimize","core:window:allow-unminimize","core:window:allow-show","core:window:allow-hide","core:window:allow-close","core:window:allow-start-dragging"]}}
+{"default":{"identifier":"default","description":"Capability for the main window","local":true,"windows":["main"],"permissions":["core:default","shell:allow-open","dialog:allow-open","dialog:default","core:webview:allow-create-webview-window"]},"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-maximize","core:window:allow-unmaximize","core:window:allow-toggle-maximize","core:window:allow-minimize","core:window:allow-unminimize","core:window:allow-show","core:window:allow-hide","core:window:allow-close","core:window:allow-start-dragging"]},"video":{"identifier":"video","description":"Capability for the main window","local":true,"windows":["wallitor_video_playback"],"permissions":["core:default","shell:allow-open"]}}

wallitor-gui/src-tauri/src/lib.rs

@@ -7,6 +7,8 @@ use std::path::Path;
 use tauri::ipc::Response;
 use serde::{Deserialize,Serialize};
 use chrono::Local;
+use libloading::{Library,Symbol};
+use std::ffi::CString;
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
@@ -14,7 +16,7 @@ pub fn run() {
     .setup(setup::init)
     .plugin(tauri_plugin_fs::init())
     .plugin(tauri_plugin_dialog::init())
-    .invoke_handler(tauri::generate_handler![read_resource_dir,get_file,new_wallpaper])
+    .invoke_handler(tauri::generate_handler![read_resource_dir,get_file,new_wallpaper,set_wallpaper])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }
@@ -53,7 +55,8 @@ struct AddInfo {
 struct Info{
   media_type:String,
   description:String,
-  created:i64
+  created:i64,
+  entry_point:String
 }
 
 #[derive(Serialize)]
@@ -83,14 +86,6 @@ async fn new_wallpaper(info:AddInfo) -> String{
   if fs::copy(Path::new(&info.preview), Path::new(&format!("{}/preview.jpg",folder))).is_err(){
     return String::from("Error copy image.");
   }
-  let config =json!( Config{
-    name:info.name,
-    info:Info { media_type: String::from("video"), description: info.description, created: current_time},
-    option:Opt{mute:true}
-  });
-  if fs::write(Path::new(&format!("{}/config.json",folder)), config.to_string()).is_err(){
-    return String::from("Error write config.");
-  }
   if fs::create_dir(Path::new(&format!("{}/res",folder))).is_err(){
     return String::from("Error creating res folder.");
   }
@@ -99,9 +94,34 @@ async fn new_wallpaper(info:AddInfo) -> String{
     if fs::copy(Path::new(&info.media), Path::new(&format!("{}/res/{}",folder,filename))).is_err(){
       return String::from("Error copy media.");
     }
+    let config =json!( Config{
+      name:info.name,
+      info:Info { media_type: String::from("video"), description: info.description, created: current_time,entry_point:String::from(filename)},
+      option:Opt{mute:true}
+    });
+    if fs::write(Path::new(&format!("{}/config.json",folder)), config.to_string()).is_err(){
+      return String::from("Error write config.");
+    }
   }
   else{
     return String::from("Invalid media path.");
   }
   String::from("Success")
 }
+
+#[tauri::command]
+async fn set_wallpaper(title:String)->bool{
+  let lib = unsafe {
+      Library::new("wallitor-core.dll").unwrap()
+  };
+  type SetFn = unsafe extern "C" fn(*const i8)->i8;
+  let set:Symbol<SetFn> = unsafe {
+      lib.get(b"set_wallpaper\0").unwrap()
+  };
+  let title = CString::new(title.to_string()).unwrap();
+  unsafe {
+    let res = set(title.as_ptr());
+    if res == 0 {return false;};
+  }
+  return true;
+}

wallitor-gui/src/components/AddItem.vue

@@ -4,7 +4,7 @@
     }">
         <div class="item-add-content">
             <header class="colbox item-add-header">
-                <div class="colbox item-add-header-icon item-add-header-item" @click="visible = !visible">
+                <div class="colbox item-add-header-icon item-add-header-item" @click="toggleVisible">
                     <template v-if="visible">
                         <SvgIcon name="keyboard-arrow-down" size="20px"></SvgIcon>
                     </template>
@@ -62,6 +62,10 @@ import { defineExpose, defineModel, ref } from 'vue';
 import SvgIcon from './SvgIcon.vue';
 import { open } from '@tauri-apps/plugin-dialog';
 import { invoke } from '@tauri-apps/api/core';
+import { useStore } from 'vuex';
+import { ElMessage } from 'element-plus';
+
+const store = useStore();
 const visible = defineModel<boolean>();
 const bg = ref<HTMLDivElement | null>(null);
 interface AddInfo {
@@ -116,11 +120,32 @@ function selectPreview() {
     })
 }
 
+function toggleVisible() {
+    visible.value = !visible.value
+}
+
 function handleAdd() {
     invoke("new_wallpaper", {
         info: addInfo.value
     }).then((res) => {
-        console.log(res);
+        if (res as string == "Success") {
+            addInfo.value = {
+                name: "",
+                preview: "",
+                media: "",
+                description: ""
+            }
+            store.commit("getWpList");
+            toggleVisible();
+            ElMessage({
+                type: "success",
+                message: "新建成功"
+            })
+        }
+        else ElMessage({
+            type: "error",
+            message: `新建失败 ${res}`
+        })
     })
 }
 </script>
@@ -137,7 +162,7 @@ function handleAdd() {
     transform: translate(-50%, 0);
     position: absolute;
     width: 85%;
-    height: calc(100% - 60px);
+    height: calc(100% - 55px);
     transition: .8s cubic-bezier(0.9, 0, 0, 1.1);
 }
 
@@ -152,7 +177,7 @@ function handleAdd() {
 }
 
 .item-add-main {
-    margin: 5px;
+    margin: 10px;
     height: calc(100% - 45px);
     overflow: auto;
 }

wallitor-gui/src/components/ApplyBar.vue

@@ -42,7 +42,7 @@
                         </div>
                     </div>
                 </div>
-                <button class="apply-button">应用</button>
+                <button class="apply-button" @click="apply">应用</button>
             </div>
             <div class="apply-bar-close" @click="handleClose">
                 <svg-icon name="close" color="var(--text-color)"></svg-icon>
@@ -55,6 +55,7 @@
 import { defineProps, defineExpose, defineEmits, defineModel, watch, ref, type PropType } from 'vue';
 type Position = "left" | "right";
 import type { Info, Cell } from '@/ts/types'
+import { invoke } from '@tauri-apps/api/core';
 
 const props = defineProps({
     position: {
@@ -74,7 +75,8 @@ const cell = ref<Cell>({
         info: {
             description: "",
             created: 0,
-            type: "Video"
+            media_type: "Video",
+            entry_point: ""
         },
         option: {
             mute: true
@@ -103,6 +105,23 @@ function open(conFig: Cell) {
     console.log(cell.value)
     visible.value = true;
 }
+
+import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
+function apply() {
+    const webview = new WebviewWindow('wallitor_video_playback', {
+        title: "wallitor_video_playback",
+        url: `/video/?url=${cell.value.path}\\res\\${cell.value.config.info.entry_point}`,
+        fullscreen: true,
+        decorations: false
+    });
+    webview.once("tauri://created", () => {
+        invoke("set_wallpaper", {
+            title: "wallitor_video_playback"
+        }).then((res) => {
+            console.log(res)
+        })
+    });
+}
 </script>
 
 <style>

wallitor-gui/src/main.ts

@@ -4,10 +4,13 @@ import router from './router'
 import "virtual:svg-icons-register";
 import globalComponents from '@/components/install'
 import "@/style/global.css"
+import {store} from '@/store'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 
 const app = createApp(App)
 
 app.use(router);
 app.use(globalComponents);
+app.use(store)
 
 app.mount('#app')

wallitor-gui/src/store/index.ts

@@ -0,0 +1,46 @@
+import { createStore } from 'vuex'
+import { invoke } from '@tauri-apps/api/core';
+import type {ResourceDir,wpConfig} from '@/ts/types'
+
+function arrayBufferToString(buffer: ArrayBuffer): string {
+  const decoder = new TextDecoder('utf-8');
+  return decoder.decode(buffer);
+}
+
+export const store = createStore({
+    state() {
+        return {
+            wpList:[]
+        }
+    },
+    mutations: {
+        getWpList(state){
+            state.wpList = [];
+            invoke("read_resource_dir", {}).then((res) => {
+                const resource = JSON.parse(res as string) as ResourceDir;
+                for (let id of Object.keys(resource.files)) {
+                  let dir = resource.files[id]
+                  if ("preview.jpg" in dir) {
+                    invoke("get_file", {
+                      path: dir["preview.jpg"]
+                    }).then((res) => {
+                      let binary_data_arr = new Uint8Array(res as number[]);
+                      const blob = new Blob([binary_data_arr], { type: 'image/jpeg' });
+                      const imageUrl = URL.createObjectURL(blob);
+                      invoke("get_file", {
+                        path: `${id}\\config.json`
+                      }).then((cfg) => {
+                        let config: wpConfig = JSON.parse(arrayBufferToString(cfg as ArrayBuffer));
+                        state.wpList.push({
+                          path: id,
+                          img: imageUrl,
+                          config: config
+                        })
+                      })
+                    })
+                  }
+                }
+              });
+        }
+    }
+})

wallitor-gui/src/store/vuex.d.ts

@@ -0,0 +1,14 @@
+import type { Store } from 'vuex'
+import type {  Cell } from '@/ts/types'
+
+declare module 'vue' {
+  // 声明自己的 store state
+  interface State {
+    wpList:Cell[]
+  }
+
+  // 为 `this.$store` 提供类型声明
+  interface ComponentCustomProperties {
+    $store: Store<State>
+  }
+}

wallitor-gui/src/style/global.css

@@ -38,8 +38,8 @@ html.dark {
   --shadow-edge-glow: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.12),
     inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.04), inset 0 0 4px rgba(255, 255, 255, 0.06);
   --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.16);
-  --bg-color-alpha: hsl(230 12% 14% / 0.68);
+  --bg-color-alpha: hsla(240, 1%, 14%, 0.68);
-  --bg-color-alpha-darker: hsl(230 12% 14% / 0.93);
+  --bg-color-alpha-darker: hsla(0, 0%, 14%, 0.948);
   --bg-hover-fill: rgb(131 131 145 / 24%);
   --bg-hover-fill-close: rgba(211, 86, 86, 0.579);
 }

wallitor-gui/src/ts/types.d.ts

@@ -7,7 +7,8 @@ type WallpaperType = 'Video'
 export interface Info {
   media_type: WallpaperType
   description: string
-  created: number
+  created: number,
+  entry_point:string
 }
 export interface Option {
   mute: boolean
@@ -17,3 +18,14 @@ export interface Cell {
   path: string
   config: wpConfig
 }
+
+export interface Resource {
+  "config.json": string,
+  [filename: string]: string
+}
+
+export interface ResourceDir {
+  files: {
+    [resId: string]: Resource
+  }
+}

wallitor-gui/src/views/HomeView.vue

@@ -2,62 +2,23 @@
 import ItemCard from '@/components/ItemCard.vue';
 import ApplyBar from '@/components/ApplyBar.vue';
 import AddItem from '@/components/AddItem.vue';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { entry } from '@/ts/entry';
-import { invoke } from '@tauri-apps/api/core';
+import type { Cell } from '@/ts/types'
-import type { wpConfig, Cell } from '@/ts/types'
+import { useStore } from 'vuex';
 
-const items = ref<Cell[]>([])
+const store = useStore();
+const items = computed<Cell[]>(()=>store.state.wpList);
 const apply_bar_visible = ref(false);
 const applyBar = ref<InstanceType<typeof ApplyBar> | null>(null);
 const item_add_visible = ref(false);
 
-interface Resource {
-  "config.json": string,
-  [filename: string]: string
-}
-
-interface ResourceDir {
-  files: {
-    [resId: string]: Resource
-  }
-}
-
-function arrayBufferToString(buffer: ArrayBuffer): string {
-  const decoder = new TextDecoder('utf-8');
-  return decoder.decode(buffer);
-}
-
 onMounted(() => {
   const main = document.querySelector(".home-main") as HTMLElement;
   setTimeout(() => {
     entry("up", main, 20);
   })
-  invoke("read_resource_dir", {}).then((res) => {
+ store.commit("getWpList");
-    let resource = JSON.parse(res as string) as ResourceDir;
-    for (let id of Object.keys(resource.files)) {
-      let dir = resource.files[id]
-      if ("preview.jpg" in dir) {
-        invoke("get_file", {
-          path: dir["preview.jpg"]
-        }).then((res) => {
-          let binary_data_arr = new Uint8Array(res as number[]);
-          const blob = new Blob([binary_data_arr], { type: 'image/jpeg' });
-          const imageUrl = URL.createObjectURL(blob);
-          invoke("get_file", {
-            path: `${id}\\config.json`
-          }).then((cfg) => {
-            let config: wpConfig = JSON.parse(arrayBufferToString(cfg as ArrayBuffer));
-            items.value.push({
-              path: id,
-              img: imageUrl,
-              config: config
-            })
-          })
-        })
-      }
-    }
-  });
 })
 
 function openCard(config: Cell) {

wallitor-gui/video/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <style>
+      html,body{
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+      #player{
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <video id="player"></video>
+    <script type="module" src="./playback.ts"></script>
+  </body>
+</html>

wallitor-gui/video/playback.ts

@@ -0,0 +1,31 @@
+import { invoke } from '@tauri-apps/api/core'
+interface Params{
+    url?:string
+}
+function getSearchParamsAsObject() {
+  const params = new URLSearchParams(window.location.search)
+  const paramsObject = {}
+  params.forEach((value, key) => {
+    paramsObject[key] = value
+  })
+  return paramsObject
+}
+const params:Params = getSearchParamsAsObject()
+if (params.url) {
+  console.log(params.url)
+  invoke('get_file', {
+    path: params.url
+  }).then((res) => {
+    console.log(res)
+    const binary_data_arr = new Uint8Array(res as number[])
+    const blob = new Blob([binary_data_arr], { type: 'video/mp4' })
+    const videoUrl = URL.createObjectURL(blob)
+    const player = document.getElementById("player") as HTMLVideoElement;
+    if(player) {
+        player.src = videoUrl;
+        player.play();
+        player.muted = true;
+        player.loop = true;
+    }
+  })
+}

wallitor-gui/vite.config.ts

@@ -3,6 +3,7 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import ElementPlus from 'unplugin-element-plus/vite'
 import path from "path";
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 
@@ -22,7 +23,10 @@ export default defineConfig({
         path.resolve(__dirname, "src/assets/svgs"),
       ],
       symbolId: "icon-[name]"
-    })
+    }),
+    ElementPlus({
+      // options
+    }),
   ],
   resolve: {
     alias: {