feat: 基础导航栏 & 基础主题切换.

0154d47c · KesaubeEire · e56f081b · 0154d47c · 0154d47c · 0154d47c
Commit 0154d47c authored Oct 19, 2023 by KesaubeEire
7 changed files
--- a/README.md
+++ b/README.md
+# rrpg.link 前端
+
+本项目为 rrpg.link 打造, 为更好展示已收藏的 RPGMaker 游戏而建.
+
+## 技术栈
+
+Svelte + daysiUI
+
+## 项目需求
+
+- [ ] 刮削游戏 (后端部分)
+- [ ] 中日切换
+- [ ] TAG 展示 & 搜索
+- [ ] 主题切换
+  - [x] 基础切换
+  - [ ] localstorage 记忆
+
+## Bugs
+
+- [ ]导航栏 Button 连续点击容易失败 (可以考虑换其他 tips 方案)
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
 <!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>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+<html lang="en" data-theme="light">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" type="image/png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite App</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
--- a/src/App.svelte
+++ b/src/App.svelte
-<button class="btn">Hello daisyui</button>
+<script>
+  /**主题*/
+  const themes = [
+    'light',
+    'dark',
+    'cupcake',
+    'bumblebee',
+    'emerald',
+    'corporate',
+    'synthwave',
+    'retro',
+    'cyberpunk',
+    'valentine',
+    'halloween',
+    'garden',
+    'forest',
+    'aqua',
+    'lofi',
+    'pastel',
+    'fantasy',
+    'wireframe',
+    'black',
+    'luxury',
+    'dracula',
+    'cmyk',
+    'autumn',
+    'business',
+    'acid',
+    'lemonade',
+    'night',
+    'coffee',
+    'winter'
+  ];
+
+  /**导航栏注入对象*/
+  const injectText = [
+    {
+      id: 'readme',
+      text: '使用说明',
+      click: () => {
+        console.log('TODO: click 弹出使用说明.');
+      },
+      hover: () => {
+        console.log('TODO: hover 弹出使用说明.');
+      }
+    },
+    {
+      id: 'save',
+      text: '存档操作',
+      hint: '导入/导出存档或使用云存档',
+      click: () => {
+        console.warn('跳转到存档配置页面.');
+        // window.open('/save_export/');
+      }
+    },
+    {
+      id: 'switch',
+      text: '中日切换',
+      hint: '切换游戏名称中日文',
+      click: () => {
+        console.log('TODO: 中日切换.');
+      }
+    },
+    {
+      id: 'cheat',
+      text: '作弊命令',
+      hint: '常用作弊命令',
+      click: () => {
+        console.log('TODO: 常用作弊命令.');
+      }
+    }
+  ];
+</script>
+
+<!-- <div class="top">决斗编年史</div> -->
+
+<!-- 导航栏 -->
+<div class="drawer">
+  <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
+  <div class="drawer-content flex flex-col">
+    <!-- Navbar -->
+    <div class="w-full navbar bg-base-300">
+      <div class="flex-none lg:hidden">
+        <label for="my-drawer-3" aria-label="open sidebar" class="btn btn-square btn-ghost">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </label>
+      </div>
+      <div class="flex-1 px-2 mx-2">在线RPG分部·里</div>
+      <div class="flex-none hidden lg:block">
+        <ul class="menu menu-horizontal">
+          <!-- Navbar menu content here -->
+          {#each injectText as Item}
+            <li>
+              <div class="tooltip tooltip-left" data-tip={Item.hint}>
+                <button on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
+              </div>
+            </li>
+          {/each}
+          <li>
+            <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+            <div class="dropdown dropdown-left">
+              <!-- svelte-ignore a11y-label-has-associated-control -->
+              <label tabindex="0">主题</label>
+              <ul tabindex="0" class="dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-64 h-[70vh] overflow-y-auto">
+                {#each themes as theme}
+                  <li>
+                    <button
+                      data-theme={theme}
+                      on:click={() => {
+                        document.body.parentElement.setAttribute('data-theme', theme);
+                        console.log('切换主题:\t', theme);
+                      }}
+                      class="rounded my-1 flex justify-between items-center"
+                    >
+                      <div>
+                        {theme}
+                      </div>
+
+                      <div class="flex h-full flex-shrink-0 flex-wrap gap-1" data-svelte-h="svelte-dkjulf">
+                        <span class="bg-primary w-4 h-4 rounded-box" />
+                        <span class="bg-secondary w-4 h-4 rounded-box" />
+                        <span class="bg-accent w-4 h-4 rounded-box" />
+                        <span class="bg-neutral w-4 h-4 rounded-box" />
+                      </div>
+                    </button>
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- Page content here -->
+    Content
+  </div>
+  <div class="drawer-side">
+    <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay" />
+    <ul class="menu p-4 w-80 min-h-full bg-base-200">
+      <!-- Sidebar content here -->
+      {#each injectText as Item}
+        <li>
+          <button on:click={Item.click}>{Item.text}</button>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>
--- a/src/components/card.svelte
+++ b/src/components/card.svelte
--- a/src/components/readme.svelte
+++ b/src/components/readme.svelte
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
 module.exports = {
  content: ['./src/**/*.{svelte,js,ts}'],
  plugins: [require('daisyui')],
+
+  // 主题
+  daisyui: {
+    themes: [
+      "light",
+      "dark",
+      "cupcake",
+      "bumblebee",
+      "emerald",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+      "valentine",
+      "halloween",
+      "garden",
+      "forest",
+      "aqua",
+      "lofi",
+      "pastel",
+      "fantasy",
+      "wireframe",
+      "black",
+      "luxury",
+      "dracula",
+      "cmyk",
+      "autumn",
+      "business",
+      "acid",
+      "lemonade",
+      "night",
+      "coffee",
+      "winter",
+    ],
+  },
 };