Settings

src/components/KUNGalgameSettingPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 /* 导入 loli 数据 */
 import {
   loliBodyLeft,
@@ -21,13 +22,68 @@ import {
 
 <template>
   <div class="root">
-    <div class="title">设置面板</div>
-    <div class="mode">白天 / 黑夜切换</div>
-    <div class="main">主页页面宽度设置</div>
-    <div class="background">论坛背景设置</div>
-    <div class="reset">恢复默认设置</div>
-    <!-- 看板娘 -->
     <div class="container">
+      <div class="title">设置面板</div>
+      <div class="mode">
+        <span>模式切换</span>
+        <div class="mode-container">
+          <li>
+            <Icon
+              class="sun"
+              icon="line-md:moon-filled-alt-to-sunny-filled-loop-transition"
+            />
+          </li>
+          <li>
+            <Icon
+              class="moon"
+              icon="line-md:sunny-outline-to-moon-loop-transition"
+            />
+          </li>
+        </div>
+      </div>
+      <div>
+        <span>主页页面宽度设置</span>
+        <div class="page-width">
+          <span>61.8%</span><input class="main" type="range" /><span>90%</span>
+        </div>
+      </div>
+
+      <div class="kungalgame-background">
+        背景设置
+        <ul class="kungalgame-background-container">
+          <li>
+            <span>使用我们的预设的背景</span>
+            <!-- 预设背景集 -->
+            <ul class="kungalgame-reset-bg">
+              <li><img src="@/assets/images/bg/bg1-m.png" /></li>
+              <li><img src="@/assets/images/bg/bg2-m.png" /></li>
+              <li><img src="@/assets/images/bg/bg3-m.png" /></li>
+              <li><img src="@/assets/images/bg/bg4-m.png" /></li>
+              <li><img src="@/assets/images/bg/bg5-m.png" /></li>
+              <li><img src="@/assets/images/bg/bg6-m.png" /></li>
+              <li><img src="@/assets/images/bg/bg7-m.png" /></li>
+              <li><img src="@/assets/images/bg/bg8-m.png" /></li>
+              <li><img src="@/assets/images/bg/bg9-m.png" /></li>
+            </ul>
+          </li>
+          <!-- 用户自定义背景 -->
+          <li>
+            <span>自定义背景</span>
+            <div class="kungalgamer-bg">
+              <span>请在这里粘贴图片url</span>
+              <div class="bg-url-input">
+                <input type="text" required />
+                <button>确定</button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="fix-loli">是否固定看板娘</div>
+      <div class="reset">恢复默认设置</div>
+    </div>
+    <!-- 看板娘 -->
+    <div class="loli">
       <!-- 身体 -->
       <img class="lass" :src="lass" alt="ren" />
       <img class="eye" :src="eye" alt="ren" />
@@ -41,7 +97,7 @@ import {
 <style lang="less" scoped>
 .root {
   width: 300px;
-  height: 100%;
+  height: 1100px;
   top: 65px;
   right: 0;
   position: absolute;
@@ -49,9 +105,127 @@ import {
   backdrop-filter: blur(5px);
   border-radius: 10px;
   z-index: 1007;
-  overflow: hidden;
 }
 .container {
+  margin: 10px;
+  font-size: 17px;
+  & > div {
+    margin: 10px 0;
+  }
+}
+.title {
+  font-size: 23px;
+}
+.mode {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mode-container {
+  font-size: 25px;
+  width: 60%;
+  display: flex;
+  justify-content: space-around;
+  li:nth-child(1) {
+    color: @kungalgame-red-4;
+  }
+  li:nth-child(2) {
+    color: @kungalgame-blue-4;
+  }
+}
+.page-width {
+  font-size: 15px;
+  display: flex;
+}
+.main {
+  width: 100%;
+}
+/* 背景设置 */
+.kungalgame-background-container {
+  display: block;
+  /* 背景菜单的高度 */
+  height: 300px;
+  top: 100%;
+  left: 0%;
+  background-color: @kungalgame-blue-0;
+  box-shadow: 1px 2px 1px 1px @kungalgame-trans-red-3;
+  font-size: 15px;
+  font-weight: normal;
+  color: @kungalgame-font-color-3;
+}
+/* 背景容器的标题字体 */
+.kungalgame-background-container span {
+  height: 30px;
+  /* 居中 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* 背景图片略缩图三行三列 grid */
+.kungalgame-reset-bg {
+  display: grid;
+  grid-template-columns: repeat(3, 80px);
+  grid-template-rows: repeat(3, 50px);
+  color: @kungalgame-font-color-3;
+  position: relative;
+  /* 距离下方区域的距离 */
+  margin-bottom: 17px;
+}
+/* 单个图片居中 */
+.kungalgame-reset-bg li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* 单个图片的距离 */
+.kungalgame-reset-bg img {
+  width: 70px;
+}
+/* 图片的 hover */
+.kungalgame-reset-bg img:hover {
+  width: 200px;
+  transition: 0.2s;
+  z-index: 7;
+}
+.kungalgamer-bg {
+  display: flex;
+  flex-direction: column;
+}
+/* url 的粘贴框 */
+.bg-url-input {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.bg-url-input input {
+  padding-left: 5px;
+  height: 25px;
+  border: 1px solid @kungalgame-blue-4;
+}
+/* 粘贴框的 focus */
+.bg-url-input input:focus {
+  outline: none;
+  background-color: @kungalgame-trans-red-0;
+}
+/* 确定按钮 */
+.bg-url-input button {
+  padding: 0 10px;
+  height: 25px;
+  box-sizing: border-box;
+  border: 1px solid @kungalgame-blue-4;
+  border-left: none;
+  background-color: @kungalgame-trans-white-5;
+  cursor: pointer;
+}
+/* 确定按钮的 hover */
+.bg-url-input button:hover {
+  background-color: @kungalgame-trans-blue-0;
+}
+/* 确定按钮的 active */
+.bg-url-input button:active {
+  background-color: @kungalgame-trans-red-3;
+}
+.loli {
   height: 100%;
   margin: auto;
   position: relative;
@@ -82,4 +256,12 @@ import {
   left: v-bind(loliFaceLeft);
   top: v-bind(loliFaceTop);
 }
+@media (max-height: 1100px) {
+  .loli {
+    display: none;
+  }
+  .root {
+    height: 400px;
+  }
+}
 </style>

src/components/KUNGalgameTopBar.vue

@@ -43,6 +43,9 @@ if (isTopicPage) {
 let navItemNum = topBarItem.length
 const navItemNumString = navItemNum + '00px'
 
+// 用户点击设置按钮时的操作
+const isShowPanel = ref(true)
+
 // 用户点击头像时的操作
 const handleClickAvatar = () => {
   // isShowInfo.value = !isShowInfo.value
@@ -50,7 +53,9 @@ const handleClickAvatar = () => {
 }
 
 // 用户点击网站设置时的操作
-const handleSittingsClick = () => {}
+const handleSittingsClick = () => {
+  isShowPanel.value = !isShowPanel.value
+}
 onBeforeMount(() => {})
 </script>
 
@@ -88,10 +93,19 @@ onBeforeMount(() => {})
       </div>
     </div>
   </div>
-  <KUNGalgameSettingsPanel />
+  <transition name="kungalgame-panel">
+    <KUNGalgameSettingsPanel v-if="isShowPanel" />
+  </transition>
 </template>
 
 <style lang="less" scoped>
+.kungalgame-panel-enter-active,
+.kungalgame-panel-leave-active {
+  transition: right 0.5s;
+}
+.kungalgame-panel-enter, .kungalgame-panel-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  right: -300px;
+}
 /* 头部样式 */
 .header {
   /* 头部高度 */

src/config/setting-panel.ts

@@ -0,0 +1,23 @@
+// 设置面板配置
+interface KUNGalgameSettings {
+  // 是否显示设置面板
+  showSettings: boolean
+  // 是否黑夜模式
+  showDarkMode: boolean
+  // 主页面宽度设置
+  pageWidth: number
+  // 论坛背景设置，0 为无背景
+  kungalgameBackground: number
+  // 是否固定看板娘
+  fixLoli: boolean
+}
+
+const kungalgameSettings: KUNGalgameSettings = {
+  showSettings: false,
+  showDarkMode: false,
+  pageWidth: 61.8,
+  kungalgameBackground: 0,
+  fixLoli:false
+}
+
+export default kungalgameSettings

src/store/modules/settings.ts

@@ -0,0 +1,22 @@
+// KUNGalgame 设置面板的 store
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import kungalgameSettings from '@/config/setting-panel'
+
+export const useSettingsPanelStore = defineStore('settings', () => {
+  const showSettings = ref<boolean>(kungalgameSettings.showSettings)
+  const showDarkMode = ref<boolean>(kungalgameSettings.showDarkMode)
+  const pageWidth = ref<number>(kungalgameSettings.pageWidth)
+  const kungalgameBackground = ref<number>(
+    kungalgameSettings.kungalgameBackground
+  )
+  const fixLoli = ref<boolean>(kungalgameSettings.fixLoli)
+
+  return {
+    showSettings,
+    showDarkMode,
+    pageWidth,
+    kungalgameBackground,
+    fixLoli,
+  }
+})