搞搞搞

.eslintrc.js

@@ -51,5 +51,6 @@ module.exports = {
     utils: true,
     gConfigInfo: true,
     gConfigTxt: true,
+    fdage: true,
   }
 }

README.md

@@ -1,4 +1,7 @@
-## 部署测试环境
+# 部署测试环境
 文件存放位置：
 
-访问url：
+访问url：
+
+# url查询片段规则：
+* 启用暗黑主题色：`dark-theme=1，取其他值，或者不写，则默认不开启。

public/index.html

@@ -13,6 +13,7 @@
       new VConsole()
     </script> -->
     
+    <script src="./4dage.js"></script>
     <script src="./user-config/info.js"></script>
     <script src="./user-config/txt.js"></script>
     

src/store/index.js

@@ -2,13 +2,13 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    usingChinese: true,
+    isDarkTheme: false,
   },
   getters: {
   },
   mutations: {
-    setUsingChinese(state, value) {
-      state.usingChinese = value
+    setIsDarkTheme(state, value) {
+      state.isDarkTheme = value
     },
   },
   actions: {

src/views/Home.vue

@@ -11,7 +11,7 @@
         <li
           v-for="item in Object.entries($gConfigInfo.objInfo).slice(pageSize * (currentPage - 1), pageSize * currentPage)"
           :key="item[0]"
-          @click="onClickItem"
+          @click="onClickItem(item)"
         >
           <img
             class=""
@@ -61,7 +61,15 @@ export default {
     ...mapMutations([
     ]),
     onClickItem(item) {
-      this.$router.push({ name: 'RelicDetail' })
+      this.$router.push({
+        name: 'RelicDetail',
+        query: {
+          m: item[0],
+          ...this.$route.query['dark-theme'] ? {
+            'dark-theme': this.$route.query['dark-theme'],
+          } : {}
+        }
+      })
     }
   },
 }

src/views/RelicDetail.vue

@@ -1,12 +1,118 @@
 <template>
-  <div />
+  <div
+    class="relic-detail"
+    :class="{
+      isDarkTheme,
+      notDarkTheme: !isDarkTheme,
+    }"
+  >
+    <el-switch
+      :model-value="isDarkTheme"
+      class="theme-switch"
+      inline-prompt
+      :active-icon="Moon"
+      :inactive-icon="Sunny"
+      @update:modelValue="onThemeChange"
+    />
+    <!-- <div class="outerImg">
+      <img
+        :src="`${$env.BASE_URL}user-config/images/${$route.query.m}.jpg`"
+        alt=""
+      >
+    </div> -->
+  </div>
 </template>
 
 <script>
-// import { } from "@/libs/4dage.js"
+import { Moon, Sunny } from '@element-plus/icons-vue'
+import { mapMutations, mapState } from 'vuex'
 
+export default {
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapState([
+      'isDarkTheme',
+    ]),
+    Sunny() {
+      return Sunny
+    },
+    Moon() {
+      return Moon
+    },
+  },
+  beforeCreate() {
+    fdage.embed('user-config/4dage/' + 'cs01' + '.4dage', {
+      width: 800,
+      height: 600,
+      autoStart: true,
+      fullFrame: true,
+      pagePreset: false
+    })
+  },
+  created() {
+    if (this.$route.query && this.$route.query['dark-theme'] && this.$route.query['dark-theme'] === '1' ) {
+      console.log('sdfsdf', this.$route.query['dark-theme'])
+      this.setIsDarkTheme(true)
+    }
+  },
+  beforeUnmount() {
+    const fdageUIElem = document.querySelector('#fdageUI')
+    if (fdageUIElem && fdageUIElem.parentNode) {
+      fdageUIElem.parentNode.parentNode.removeChild(fdageUIElem.parentNode)
+    }
+  },
+  methods: {
+    ...mapMutations([
+      'setIsDarkTheme'
+    ]),
+    onThemeChange(v) {
+      this.setIsDarkTheme(v)
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
-
+.relic-detail {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  &.isDarkTheme {
+    background: #303030;
+  }
+  &.notDarkTheme {
+    background-image: url(@/assets/images/relic-bg-light.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  > .theme-switch {
+    position: absolute;
+    top:10px;
+    right: 10px;
+    z-index: 1;
+  }
+  > .outerImg {
+    transition: all 1s;
+    opacity: 1;
+    position: absolute;
+    z-index: 998;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1a1b20;
+    > img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
 </style>