applybar complete

2024-10-13 10:23:08 +08:00
parent 989aaf73a8
commit cd10769d5d
40 changed files with 7060 additions and 448 deletions
@@ -16,6 +16,9 @@
                    <div>添加</div>
                </div>
            </header>
+            <main>
+
+            </main>
        </div>
    </div>
 </template>
@@ -4,9 +4,45 @@
            'apply-bar-left': position == 'left',
            'apply-bar-right': position == 'right'
        }">
-            <div class="apply-bar-content">
-                <img :src="config.img">
-                {{ config.name }}
+            <div class="apply-bar-content rowbox">
+                <img :src="cell.img" class="apply-bar-img">
+                <div class="apply-bar-title">{{ cell.config.name }}</div>
+                <div class="apply-bar-info colbox" style="align-items: center;">
+                    <div class="apply-bar-info-tag">
+                        类型
+                    </div>
+                    <div class="apply-bar-info-main">
+                        {{ cell.config.info.type }}
+                    </div>
+                </div>
+                <div class="apply-bar-info rowbox">
+                    <div class="apply-bar-info-tag">
+                        描述
+                    </div>
+                    <div class="apply-bar-info-main">
+                        {{ cell.config.info.description }}
+                    </div>
+                </div>
+                <div class="apply-bar-info colbox" style="align-items: center;">
+                    <div class="apply-bar-info-tag">
+                        创建时间
+                    </div>
+                    <div class="apply-bar-info-main">
+                        {{ (new Date(cell.config.info.created)).toLocaleString() }}
+                    </div>
+                </div>
+                <div class="apply-bar-info rowbox">
+                    <div class="apply-bar-info-tag">
+                        设置
+                    </div>
+                    <div class="apply-bar-info-main">
+                        <div class="apply-bar-settings colbox">
+                            <div>静音</div>
+                            <div><input type="checkbox" v-model="cell.config.option.mute" /></div>
+                        </div>
+                    </div>
+                </div>
+                <button class="apply-bar-button">应用</button>
            </div>
            <div class="apply-bar-close" @click="handleClose">
                <svg-icon name="close" color="var(--text-color)"></svg-icon>
@@ -18,10 +54,8 @@
 <script setup lang="ts">
 import { defineProps, defineExpose, defineEmits, defineModel, watch, ref, type PropType } from 'vue';
 type Position = "left" | "right";
-interface Config {
-    name: string,
-    img: string
-}
+import type { Info, Cell } from '@/ts/types'
+
 const props = defineProps({
    position: {
        type: String as PropType<Position>,
@@ -32,10 +66,22 @@ const props = defineProps({
 const visible = defineModel<boolean>();
 const emit = defineEmits(["submit"]);
 const visible_ = ref(false);
-const config = ref<Config>({
-    name: "",
-    img: ""
+const cell = ref<Cell>({
+    img: "",
+    path: "",
+    config: {
+        name: "",
+        info: {
+            description: "",
+            created: 0,
+            type: "Video"
+        },
+        option: {
+            mute: true
+        }
+    }
 })
+const info_items = ref<(keyof Info)[]>(["type", "description", "created"]);
 const bg = ref<HTMLDivElement | null>(null);
 defineExpose({ open })
 watch(() => visible.value, (val, _) => {
@@ -52,9 +98,9 @@ function handleClose() {
    visible.value = false;
 }

-function open(conFig: Config) {
-    config.value = conFig;
-    console.log(conFig)
+function open(conFig: Cell) {
+    cell.value = conFig;
+    console.log(cell.value)
    visible.value = true;
 }
 </script>
@@ -127,9 +173,16 @@ function open(conFig: Config) {
 }

 .apply-bar-content {
-    padding: 20px;
+    padding: 20px 15% 0 15%;
    height: calc(100% - 40px);
+    width: 70%;
    overflow: auto;
+    color: var(--text-color);
+}
+
+.apply-bar-img {
+    width: 100%;
+    border-radius: 7px;
 }

 .apply-bar-close {
@@ -149,4 +202,50 @@ function open(conFig: Config) {
    right: 10px;
    animation: apply-bar-appear-right .6s cubic-bezier(0, 0.6, 0.2, 1.0);
 }
+
+.apply-bar-title {
+    font-size: 35px;
+    font-weight: 700;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.apply-bar-info-tag {
+    border-radius: 2px;
+    border: 1px solid var(--bd-color);
+    width: fit-content;
+    padding: 4px;
+    margin-top: 7px;
+    margin-bottom: 5px;
+    font-size: 12px;
+    font-weight: 200;
+    margin-right: 5px;
+}
+
+.apply-bar-info-main {
+    font-size: 15px;
+    font-weight: 500;
+}
+
+.apply-bar-button {
+    align-self: flex-end;
+    outline: none;
+    border: solid 1px var(--bd-color);
+    border-radius: 2px;
+    width: 75px;
+    height: 30px;
+    background-color: var(--bg-color-alpha-darker);
+    color: var(--text-color);
+    cursor: pointer;
+    transition: .3s;
+}
+
+.apply-bar-button:hover {
+    background-color: var(--bg-color-alter);
+}
+
+.apply-bar-button:active {
+    background-color: var(--bg-color-solid);
+    transform: scale(0.95);
+}
 </style>
@@ -1,10 +1,12 @@
 <template>
-    <div class="item-card">
-        <div class="item-card-main">
+    <div class="item-card" :style="{
+        backgroundImage: `url(${cell.img})`
+    }">
+        <!-- <div class="item-card-main">
            <img :src="config.img" />
-        </div>
+        </div> -->
        <div class="item-card-title">
-            {{ config.name }}
+            {{ cell.config.name }}
        </div>
    </div>
 </template>
@@ -12,15 +14,11 @@
 <script setup lang="ts">
 import { defineProps } from 'vue'
 import type { PropType } from 'vue'
-
-interface Config {
-    name: string,
-    img: string
-}
+import type { Cell } from '@/ts/types'

 const props = defineProps({
-    config: {
-        type: Object as PropType<Config>,
+    cell: {
+        type: Object as PropType<Cell>,
        required: true
    }
 })
@@ -43,6 +41,8 @@ const props = defineProps({
    transition: .3s;
    border-radius: 10px;
    box-shadow: 0 0 1px 6px transparent;
+    background-size: cover;
+    background-position: center;
 }

 .item-card-main {
@@ -0,0 +1,19 @@
+export interface wpConfig {
+  name: string
+  info: Info
+  option: Option
+}
+type WallpaperType = 'Video'
+export interface Info {
+  type: WallpaperType
+  description: string
+  created: number
+}
+export interface Option {
+  mute: boolean
+}
+export interface Cell {
+  img: string
+  path: string
+  config: wpConfig
+}
@@ -5,37 +5,70 @@ import AddItem from '@/components/AddItem.vue';
 import { ref, onMounted } from 'vue';
 import { entry } from '@/ts/entry';
 import { invoke } from '@tauri-apps/api/core';
-interface Config {
-  name: string,
-  img: string
-}
-const items = ref<Config[]>([{
-  name: "test1",
-  img: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
-}, {
-  name: "test2",
-  img: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
-}])
+import type { wpConfig, Cell } from '@/ts/types'
+
+const items = ref<Cell[]>([])
 const apply_bar_visible = ref(false);
 const applyBar = ref<InstanceType<typeof ApplyBar> | null>(null);
 const item_add_visible = ref(false);

+interface Resource {
+  "config.json": string,
+  [filename: string]: string
+}
+
+interface ResourceDir {
+  files: {
+    [resId: string]: Resource
+  }
+}
+
+function arrayBufferToString(buffer: ArrayBuffer): string {
+  const decoder = new TextDecoder('utf-8');
+  return decoder.decode(buffer);
+}
+
 onMounted(() => {
  const main = document.querySelector(".home-main") as HTMLElement;
  setTimeout(() => {
    entry("up", main, 20);
  })
-  invoke("read_resource_dir", {}).then((res) => console.log(res));
+  invoke("read_resource_dir", {}).then((res) => {
+    let resource = JSON.parse(res as string) as ResourceDir;
+    for (let id of Object.keys(resource.files)) {
+      let dir = resource.files[id]
+      if ("preview.jpg" in dir) {
+        invoke("get_file", {
+          path: dir["preview.jpg"]
+        }).then((res) => {
+          let binary_data_arr = new Uint8Array(res as number[]);
+          const blob = new Blob([binary_data_arr], { type: 'image/jpeg' });
+          const imageUrl = URL.createObjectURL(blob);
+          invoke("get_file", {
+            path: `${id}\\config.json`
+          }).then((cfg) => {
+            let config: wpConfig = JSON.parse(arrayBufferToString(cfg as ArrayBuffer));
+            items.value.push({
+              path: id,
+              img: imageUrl,
+              config: config
+            })
+          })
+        })
+      }
+    }
+  });
 })

-function openCard(config: Config) {
+function openCard(config: Cell) {
+  console.log(applyBar.value)
  if (applyBar.value) applyBar.value.open(config);
 }
 </script>

 <template>
  <main class="colbox home-main">
-    <ItemCard v-for="(item, index) in items" :key="index" :config="item" @click="openCard(item)"></ItemCard>
+    <ItemCard v-for="(item, index) in items" :key="index" :cell="item" @click="openCard(item)"></ItemCard>
  </main>
  <ApplyBar v-model="apply_bar_visible" ref="applyBar"></ApplyBar>
  <AddItem v-model="item_add_visible"></AddItem>