搞搞搞

README.md

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

public/4dage.js

@@ -5415,6 +5415,7 @@ function (I) {
   ,
   j.prototype.clearView = function () {
     for (; this.container.hasChildNodes();)
+    // 删除展示过渡时文物模糊图像的canvas
       this.container.removeChild(this.container.childNodes[0])
     delete this.progressBar,
     delete this.thumbnail,
@@ -5764,23 +5765,31 @@ function (I) {
   j.prototype.signalLoadProgress = function (e, t) {
     if (this.thumbnail) {
       if (!this.progressBar) {
+        let useDarkTheme = false
+        if (
+          localStorage.getItem('useDarkTheme') === '1' ||
+          (!localStorage.getItem('useDarkTheme') && gConfigInfo.defaultDarkTheme)
+        ) {
+          useDarkTheme = true
+        }
+
         var i = document.createElement("div")
-        i.style.backgroundColor = "rgb(240,240,240)",
+        i.style.backgroundColor = useDarkTheme ? '#000' : "#fff",
         i.style.opacity = .9,
         i.style.position = "absolute",
         i.style.zIndex = 999
-        i.style.left = "20%",
-        i.style.width = "60%",
+        i.style.left = "7%",
+        i.style.width = "86%",
         i.style.bottom = "30%",
-        i.style.height = "4px",
-        i.style["border-radius"] = "2px",
+        i.style.height = "3px",
+        i.style["border-radius"] = "1px",
         this.progressBar = document.createElement("div"),
-        this.progressBar.style.backgroundColor = "#00ccff",
+        this.progressBar.style.backgroundColor = useDarkTheme ? '#fff' : "#C5C9C9",
         this.progressBar.style.position = "absolute",
         this.progressBar.style.left = this.progressBar.style.bottom = "0px",
         this.progressBar.style.height = "100%",
         this.progressBar.style.width = "0px",
-        this.progressBar.style["border-radius"] = "2px",
+        this.progressBar.style["border-radius"] = "1px",
         i.appendChild(this.progressBar),
         this.container.appendChild(i),
         this.playButton && (this.container.removeChild(this.playButton),
@@ -6415,13 +6424,9 @@ function (I) {
   ,
   W.prototype.start = function () {
     console.log('模型加载完成')
-    setTimeout(() => {
-      let dom = document.querySelector('.outerImg')
-      if (dom) {
-        dom.style.opacity = 0
-        dom.style.pointerEvents = 'none'
-      }
-    }, 500)
+    const myEvent = new CustomEvent('model-loaded')
+    document.dispatchEvent(myEvent)
+
     this.scene.view.updateView(),
     this.ui.showActiveView(),
     this.requestFrame(this.update.bind(this)),

public/user-config/info.js

@@ -5,6 +5,9 @@ var gConfigInfo = {
   // 定义网址的 标题
   title: '常熟博物馆',
 
+  // 是否默认启用暗黑主题色（localStorage里的历史纪录值比这里的值优先级更高）
+  defaultDarkTheme: true,
+
   // 是否开启模型自动旋转功能  开启:true  关闭:false
   spinInfo: false,
 

src/App.vue

@@ -51,13 +51,13 @@ html, body {
 // ::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 0.15rem; }
 // ::-webkit-scrollbar-corner { background: #dddecc; }
 
-// // vue组件过渡效果
-// .fade-out-leave-active {
-//   transition: opacity 1s;
-// }
-// .fade-out-leave-to {
-//   opacity: 0;
-// }
+// vue组件过渡效果: fade-out
+.fade-out-leave-active {
+  transition: opacity 1s;
+}
+.fade-out-leave-to {
+  opacity: 0;
+}
 
 // // 不断渐变显隐 animation
 // .animation-show-hide {

src/components/HelpComp.vue

@@ -0,0 +1,138 @@
+<template>
+  <div
+    class="help"
+  >
+    <button
+      class="close"
+      @click="$emit('close')"
+    >
+      <img
+        src="@/assets/images/close.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+    <h1>操作指引</h1>
+    <ul>
+      <li>
+        <img
+          src="@/assets/images/rotate.png"
+          alt=""
+          draggable="false"
+        >
+        <h2>旋转</h2>
+        <span>鼠标左键</span>
+      </li>
+      <li>
+        <img
+          src="@/assets/images/scale.png"
+          alt=""
+          draggable="false"
+        >
+        <h2>缩放</h2>
+        <span>鼠标中键</span>
+      </li>
+      <li>
+        <img
+          src="@/assets/images/translate.png"
+          alt=""
+          draggable="false"
+        >
+        <h2>平移</h2>
+        <span>鼠标右键</span>
+      </li>
+      <li>
+        <img
+          src="@/assets/images/reset.png"
+          alt=""
+          draggable="false"
+        >
+        <h2>复原</h2>
+        <span>鼠标左键 × 2</span>
+      </li>
+      <li>
+        <img
+          src="@/assets/images/light-source-rotate.png"
+          alt=""
+          draggable="false"
+        >
+        <h2>光影旋转</h2>
+        <span>SHIFT+鼠标左键</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  emits: ['close'],
+}
+</script>
+
+<style lang="less" scoped>
+.help {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding-left: 235px;
+  padding-right: 235px;
+  background: rgba(0, 0, 0, 0.7);
+  > button.close {
+    position: absolute;
+    top: 55px;
+    right: 55px;
+    width: 62px;
+    height: 62px;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  > h1 {
+    margin-bottom: 105px;
+    font-size: 38px;
+    font-weight: 400;
+    color: #FFFFFF;
+    letter-spacing: 7px;
+    white-space: pre;
+  }
+  > ul {
+    width: 100%;
+    justify-content: space-evenly;
+    display: flex;
+    align-items: center;
+    > li {
+      flex: 0 0 auto;
+      width: 180px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      user-select: none;
+      > img {
+        width: 69px;
+        height: 69px;
+        margin-bottom: 27px;
+      }
+      > h2 {
+        font-size: 27px;
+        font-weight: 400;
+        color: #FFFFFF;
+        margin-bottom: 1px;
+        margin-bottom: 10px;
+      }
+      > span {
+        font-size: 20px;
+        font-weight: 400;
+        color: #FFFFFF;
+      }
+    }
+  }
+}
+</style>

src/main.js

@@ -14,6 +14,12 @@ import 'element-plus/dist/index.css'
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)
+if (
+  localStorage.getItem('useDarkTheme') === '1' ||
+  (!localStorage.getItem('useDarkTheme') && gConfigInfo.defaultDarkTheme)
+) {
+  store.commit('setIsDarkTheme', true)
+}
 
 const app = createApp(App)
 

src/store/index.js

@@ -9,6 +9,7 @@ export default createStore({
   mutations: {
     setIsDarkTheme(state, value) {
       state.isDarkTheme = value
+      localStorage.setItem('useDarkTheme', value ? '1' : '0')
     },
   },
   actions: {

src/views/Home.vue

@@ -65,9 +65,6 @@ export default {
         name: 'RelicDetail',
         query: {
           m: item[0],
-          ...this.$route.query['dark-theme'] ? {
-            'dark-theme': this.$route.query['dark-theme'],
-          } : {}
         }
       })
     }

src/views/RelicDetail.vue

@@ -14,22 +14,100 @@
       :inactive-icon="Sunny"
       @update:modelValue="onThemeChange"
     />
-    <!-- <div class="outerImg">
+    <article
+      class="desc"
+      :class="{
+        isDarkTheme,
+        notDarkTheme: !isDarkTheme,
+      }"
+    >
+      <h1 v-html="$gConfigInfo.objInfo[$route.query.m]" />
+      <div
+        v-show="isShowDescDetail"
+        class="splitter"
+      />
+      <div
+        v-show="isShowDescDetail"
+        class="detail"
+        v-html="$gConfigTxt.txtObj[$route.query.m]"
+      />
+    </article>
+    <!-- 假的阴影 -->
+    <!-- <img
+      class="relic-shadow"
+      src="@/assets/images/relic-shadow.png"
+      alt=""
+      draggable="false"
+    > -->
+
+    <transition name="fade-out">
       <img
-        :src="`${$env.BASE_URL}user-config/images/${$route.query.m}.jpg`"
+        v-if="isShowLogo"
+        :src="require(`@/assets/images/logo-for-${isDarkTheme ? 'dark' : 'light'}-theme.png`)"
         alt=""
+        class="logo"
+        draggable="false"
+      >
+    </transition>
+
+    <menu>
+      <button class="go-homepage">
+        <img
+          :src="require(`@/assets/images/btn-home-${isDarkTheme ? 'dark' : 'light'}.png`)"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button
+        class="show-detail"
+        @click="onClickShowDetail"
+      >
+        <img
+          :src="require(`@/assets/images/btn-desc-${isDarkTheme ? 'dark' : 'light'}${isShowDescDetail ? '-active' : ''}.png`)"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button
+        class="show-help"
+        @click="onClickShowHelp"
       >
-    </div> -->
+        <img
+          :src="require(`@/assets/images/btn-help-${isDarkTheme ? 'dark' : 'light'}${isShowHelp ? '-active' : ''}.png`)"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button class="share">
+        <img
+          :src="require(`@/assets/images/btn-share-${isDarkTheme ? 'dark' : 'light'}.png`)"
+          alt=""
+          draggable="false"
+        >
+      </button>
+    </menu>
+
+    <help-comp
+      v-show="isShowHelp"
+      @close="isShowHelp = false"
+    />
   </div>
 </template>
 
 <script>
 import { Moon, Sunny } from '@element-plus/icons-vue'
 import { mapMutations, mapState } from 'vuex'
+import HelpComp from "@/components/HelpComp.vue"
 
 export default {
+  components: {
+    HelpComp,
+  },
   data() {
     return {
+      isShowDescDetail: false,
+      isShowLogo: true,
+      isShowHelp: false,
     }
   },
   computed: {
@@ -43,20 +121,15 @@ export default {
       return Moon
     },
   },
-  beforeCreate() {
-    fdage.embed('user-config/4dage/' + 'cs01' + '.4dage', {
+  created() {
+    fdage.embed('user-config/4dage/' + this.$route.query.m + '.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)
-    }
+    document.addEventListener('model-loaded', this.onModelLoad)
   },
   beforeUnmount() {
     const fdageUIElem = document.querySelector('#fdageUI')
@@ -70,6 +143,15 @@ export default {
     ]),
     onThemeChange(v) {
       this.setIsDarkTheme(v)
+    },
+    onModelLoad() {
+      this.isShowLogo = false
+    },
+    onClickShowDetail() {
+      this.isShowDescDetail = !this.isShowDescDetail
+    },
+    onClickShowHelp() {
+      this.isShowHelp = !this.isShowHelp
     }
   }
 }
@@ -97,22 +179,77 @@ export default {
     right: 10px;
     z-index: 1;
   }
-  > .outerImg {
-    transition: all 1s;
-    opacity: 1;
+  > article.desc {
     position: absolute;
-    z-index: 998;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #1a1b20;
-    > img {
-      position: absolute;
+    top: 127px;
+    left: 110px;
+    width: 503px;
+    z-index: 1;
+    pointer-events: none;
+    &.isDarkTheme {
+      color: #fff;
+    }
+    &.notDarkTheme {
+      color: #585858;
+    }
+    > h1 {
+      font-size: 32px;
+      font-family: Source Han Serif CN-Heavy, Source Han Serif CN;
+      font-weight: 800;
+      line-height: 64px;
+    }
+    > .splitter {
       width: 100%;
-      height: 100%;
-      object-fit: cover;
+      border-top: 1px dashed rgba(255,255,255,0.32);
+      margin-top: 33px;
+      margin-bottom: 29px;
+    }
+    > .detail {
+      max-height: 500px;
+      overflow: auto;
+      padding-right: 10px;
+      font-size: 20px;
+      line-height: 40px;
+    }
+  }
+  > .relic-shadow {
+    position: absolute;
+    bottom: 104px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 824px;
+    height: 55.82px;
+  }
+  > img.logo {
+    position: absolute;
+    bottom: 59px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 229.57px;
+    pointer-events: none;
+    z-index: 1;
+  }
+  > menu {
+    position: absolute;
+    bottom: 67px;
+    right: 79px;
+    z-index: 1;
+    > button {
+      width: 32px;
+      height: 32px;
+      margin-left: 16px;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-thumb { background: #fff; }
+  ::-webkit-scrollbar-button { display: none; }
+  ::-webkit-scrollbar-track { background: #000; }
+  // 横竖滚动条轨道交汇处
+  ::-webkit-scrollbar-corner { background: transparent; }
+  ::-webkit-scrollbar-resizer { background: transparent; }
 }
 </style>