Merge pull request #63 from IceWhaleTech/dev

Dev

.env.dev

@@ -1,4 +1,4 @@
 // .env.dev
 NODE_ENV=dev
-VUE_APP_DEV_IP=192.168.2.10
-VUE_APP_DEV_PORT=82
+VUE_APP_DEV_IP=192.168.2.101
+VUE_APP_DEV_PORT=80

package.json

@@ -8,22 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fontsource/noto-sans": "^4.5.4",
-    "@hscmap/vue-window": "^2.4.4",
+    "@fontsource/roboto": "^4.5.7",
     "@mdi/font": "^6.6.96",
-    "add": "^2.0.6",
-    "animate.css": "^4.1.1",
     "apexcharts": "^3.33.2",
     "axios": "^0.26.0",
-    "axios-polling": "^1.0.3",
-    "babel-runtime": "^6.26.0",
     "browser-info": "^1.3.0",
     "buefy": "^0.9.19",
     "clipboard-copy": "^4.0.1",
-    "core-js": "^3.6.5",
     "dateformat": "^5.0.2",
     "dayjs": "^1.10.8",
-    "easy-affix": "^1.0.8",
     "file-saver": "^2.0.5",
     "format-duration": "^2.0.0",
     "hitbox-js": "^1.0.2",
@@ -34,11 +27,9 @@
     "marked": "^4.0.15",
     "mime": "^3.0.0",
     "new-github-issue-url": "^1.0.0",
-    "nth-check": "^2.0.1",
     "qs": "^6.10.3",
     "socket.io-client": "^2.4.0",
-    "svg64": "^1.1.0",
-    "swiper": "6.0.0",
+    "swiper": "6.5.1",
     "ua-parser-js": "^1.0.2",
     "uuid-validate": "^0.0.3",
     "v-animate-css": "^0.0.5",
@@ -48,13 +39,10 @@
     "vue-apexcharts": "^1.6.2",
     "vue-avatar": "^2.3.3",
     "vue-awesome-swiper": "^4.1.1",
-    "vue-cli-plugin-compression": "~1.1.5",
     "vue-codemirror": "^4.0.6",
     "vue-custom-scrollbar": "^1.4.1",
-    "vue-drag-select-pro": "^1.0.4",
     "vue-fullscreen": "^2.6.1",
     "vue-i18n": "8",
-    "vue-markdown": "^2.2.4",
     "vue-multipane": "^0.9.5",
     "vue-pdf": "^4.3.0",
     "vue-plyr": "^7.0.0",
@@ -68,19 +56,18 @@
     "vue2-touch-events": "^3.2.2",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.4.0",
-    "vuex-persistedstate": "^4.0.0",
     "xterm": "^4.14.1",
     "xterm-addon-attach": "^0.6.0",
     "xterm-addon-fit": "^0.5.0",
     "yamljs": "^0.3.0",
     "yargs-parser": "^21.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "4.5.13",
+    "@vue/cli-plugin-eslint": "4.5.13",
+    "@vue/cli-plugin-router": "4.5.13",
+    "@vue/cli-plugin-vuex": "4.5.13",
+    "@vue/cli-service": "4.5.13",
     "babel-eslint": "^10.1.0",
     "compression-webpack-plugin": "5.0.0",
     "css-minimizer-webpack-plugin": "^4.0.0",
@@ -89,6 +76,7 @@
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "sass": "^1.51.0",
     "sass-loader": "10.1.1",
+    "style-resources-loader": "^1.5.0",
     "terser-webpack-plugin": "^5.3.1",
     "useless-files-webpack-plugin": "^1.0.1",
     "vue-cli-plugin-buefy": "~0.3.8",

src/App.vue

@@ -2,7 +2,7 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: Jerryk jerry@icewhale.org
- * @LastEditTime: 2022-06-14 13:23:13
+ * @LastEditTime: 2022-06-28 14:16:46
  * @Description: Main entry of application
  * @FilePath: \CasaOS-UI\src\App.vue
 -->
@@ -11,7 +11,7 @@
   <div id="app" class="is-flex is-flex-direction-column">
     <template v-if="isNotSharing">
       <!-- Background Layer Start -->
-      <div id="background" v-animate-css="isWelcome?initAni:noneAni" :style="backgroundStyleObj"></div>
+      <casa-wallpaper :animate="isWelcome?initAni:noneAni"></casa-wallpaper>
       <!-- Background Layer End -->
 
       <!-- BrandBar Start -->
@@ -33,13 +33,45 @@
 <script>
 import BrandBar from './components/BrandBar.vue'
 import ContactBar from './components/ContactBar.vue'
+import CasaWallpaper from './components/wallpaper/CasaWallpaper.vue'
 import { mixin } from './mixins/mixin';
 
+const customIconConfig = {
+  customIconPacks: {
+    'casa': {
+      sizes: {
+        'default': 'is-size-4',
+        'is-20': 'is-size-5',
+        'is-small': '',
+        'is-medium': 'is-size-3',
+        'is-large': 'is-size-1'
+      },
+      iconPrefix: 'casa-',
+      internalIcons: {
+        'check': 'checkmark',
+        'information': 'information',
+        'check-circle': 'checkmark-circle-outline',
+        'alert': 'alert',
+        'alert-circle': 'alert',
+        'arrow-up': 'arrow-up',
+        'chevron-right': 'arrow-right',
+        'chevron-left': 'arrow-back',
+        'chevron-down': 'arrow-down',
+        'eye': 'eye',
+        'eye-off': 'eye-off',
+        'menu-down': 'arrow-dropdown',
+        'menu-up': 'arrow-dropup',
+        'close-circle': 'close-circle-outline'
+      }
+    },
+  }
+}
 
 export default {
   components: {
     BrandBar,
     ContactBar,
+    CasaWallpaper
   },
   mixins: [mixin],
   data() {
@@ -48,9 +80,6 @@ export default {
       steps: [
       ],
       isWelcome: false,
-      backgroundStyleObj: {
-        backgroundImage: `url(${require('@/assets/background/bg3.jpg')})`
-      },
       noneAni: {
         classes: 'fadeIn',
         duration: 500
@@ -71,6 +100,7 @@ export default {
     }
   },
 
+
   computed: {
     isLoading() {
       return this.$store.state.siteLoading
@@ -91,6 +121,7 @@ _____             _____ _____
 -- Made by IceWhale with YOU --
 `, `font-family: monospace`);
 
+    this.$buefy.config.setOptions(customIconConfig)
     this.checkInit();
   },
   mounted() {
@@ -135,10 +166,7 @@ _____             _____ _____
       } else {
         this.$store.commit('setIsMobile', true)
       }
-
-      console.log(this.$store.state.isMobile);
     },
-
   },
   sockets: {
     connect() {
@@ -148,3 +176,19 @@ _____             _____ _____
   },
 }
 </script>
+
+<style lang="scss" scoped>
+#app {
+  width: 100vw;
+  height: 100vh;
+  font-weight: 400;
+  font-size: 0.875rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  overflow-y: hidden;
+}
+</style>