lzc-video-player 0.0.0

package/src/App.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="app-content h-full">
+    <router-view class="router-view"></router-view>
+  </div>
+</template>
+<style lang="scss" scoped>
+.app-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #000;
+}
+.router-view {
+  flex: 1;
+  min-height: 0;
+  background: #000;
+}
+</style>

package/src/assets/base.scss

@@ -0,0 +1,104 @@
+html {
+  height: 100vh;
+  // 默认的 font-size 为 16px，指定为 62.5% 后，其他地方 1rem = 10px, 1.4rem = 14px
+  font-size: 10px; // 16px * 0.625 = 10px;
+}
+
+body {
+  width: 100vw;
+  height: 100%;
+  overflow: hidden;
+}
+
+:root {
+  --lzc-safe-area-inset-bottom: var(
+    --lzc-safe-area-bottom,
+    env(safe-area-inset-bottom, 0px)
+  );
+  --lzc-safe-area-inset-top: var(
+    --lzc-safe-area-top,
+    env(safe-area-inset-top, 0px)
+  );
+  --lzc-safe-area-inset-left: var(
+    --lzc-safe-area-left,
+    env(safe-area-inset-left, 0px)
+  );
+  --lzc-safe-area-inset-right: var(
+    --lzc-safe-area-right,
+    env(safe-area-inset-right, 0px)
+  );
+  --lzc-client-safearea-view-width: var(--lzc-safe-area-view-width, 36px);
+  --lzc-client-safearea-view-height: var(--lzc-safe-area-view-height, 32px);
+  --lzc-client-safearea-view-top: var(--lzc-safe-area-inset-top, 6px);
+  --lzc-client-safearea-view-right: var(--lzc-safe-area-inset-right, 16px);
+}
+
+.lzc-safe-area-top-bar {
+  box-sizing: border-box;
+  padding-top: var(--lzc-safe-area-inset-top);
+}
+
+.lzc-safe-area-bottom-bar {
+  box-sizing: border-box;
+  padding-bottom: var(--lzc-safe-area-inset-bottom);
+}
+
+.lzc-safe-area-top-44 {
+  height: calc(44px + var(--lzc-safe-area-inset-top));
+  min-height: calc(44px + var(--lzc-safe-area-inset-top));
+}
+
+.lzc-safe-area-bottom-50 {
+  height: calc(50px + var(--lzc-safe-area-inset-bottom));
+  min-height: calc(50px + var(--lzc-safe-area-inset-bottom));
+}
+
+.lzc-preview-content-safe-area {
+  box-sizing: border-box;
+  padding-top: var(--lzc-safe-area-inset-top);
+  padding-bottom: var(--lzc-safe-area-inset-bottom);
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6d6dd;
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+@supports (-webkit-touch-callout: none) {
+  /* 解决ios中，整个页面会被弹性下拉上滑的问题 */
+  body {
+    width: 100vw;
+    height: -webkit-fill-available;
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+  background: #0a1414;
+
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  font-size: 1.5rem;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  display: flex;
+  flex-direction: column;
+}

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/src/components/Dialog/index.vue

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import { useDialogPluginComponent } from "quasar"
+import { t } from "@/i18n"
+
+const props = defineProps<{
+  title: string
+  desc?: string
+  confirm?: () => void
+}>()
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent()
+
+function onOk() {
+  onDialogOK()
+  props?.confirm?.()
+}
+</script>
+
+<template>
+  <div class="lzc-video-player">
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+      <div class="card">
+        <span class="title">{{ title }}</span>
+        <span class="subtitle" v-if="desc">{{ desc }}</span>
+        <div class="buttons">
+          <span class="cancel" @click="onDialogCancel">{{
+            t("src.components.dialog.index.cancel", "取消")
+          }}</span>
+          <span class="confirm" @click="onOk">{{
+            t("src.components.dialog.index.confirm", "确定")
+          }}</span>
+        </div>
+      </div>
+    </q-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card {
+  min-width: 29rem;
+  min-height: 16rem;
+  background: #202020;
+  border-radius: 1rem;
+  padding: 2.2rem 2.4rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+}
+
+.title {
+  height: 2.5rem;
+  font-size: 1.8rem;
+  font-weight: 600;
+  line-height: 2.5rem;
+}
+
+.subtitle {
+  height: 2rem;
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 2rem;
+  margin-bottom: 2rem;
+  margin-top: 0.9rem;
+}
+
+.buttons {
+  display: flex;
+  column-gap: 2.2rem;
+
+  > span {
+    width: 11rem;
+    height: 4rem;
+    border-radius: 0.6rem;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 1.4rem;
+    font-weight: 400;
+    line-height: 2rem;
+  }
+
+  .cancel {
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .confirm {
+    cursor: pointer;
+    background: #5f86ff;
+  }
+}
+</style>

package/src/components/MultipleEdit/choose.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+defineProps<{
+  keyValue: string
+  selectedKeys: string[]
+}>()
+
+const namespace = "page-title-edit"
+</script>
+
+<template>
+  <div :class="`${namespace}-toggle`">
+    <q-icon
+      name="svguse:#icon-全选_已选中.svg"
+      v-if="selectedKeys.includes(keyValue)"
+    />
+    <div :class="`${namespace}-toggle-unselect`" v-else></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page-title-edit {
+  &-toggle {
+    font-size: 1.6rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    padding: 2.4rem;
+
+    &-unselect {
+      width: 1.6rem;
+      height: 1.6rem;
+      background: rgba(255, 255, 255, 0.06);
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+</style>