refactor: 重构高度

oeyoews · Jul 12, 2024 · 30b636a · 30b636a
1 parent fca7674
commit 30b636a
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 38 deletions.
diff --git a/assets/tailwind.css b/assets/tailwind.css
@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 ::-webkit-scrollbar {
-  display: none;
+  /* display: none; */
 }
diff --git a/components.d.ts b/components.d.ts
@@ -16,6 +16,8 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']

diff --git a/entrypoints/options/index.html b/entrypoints/options/index.html
@@ -1,14 +1,17 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
 
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Document</title>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title> Usewiki2 </title>
+	<meta name="manifest.type" content="browser_action" />
+	<link href="~/assets/tailwind.css" rel="stylesheet" />
 </head>
 
 <body>
-	Coming ...
+	<div id="app"></div>
+	<script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/entrypoints/options/index.vue b/entrypoints/options/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>demo</div>
+</template>
diff --git a/entrypoints/options/main.ts b/entrypoints/options/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './index.vue';
+
+createApp(App).mount('#app');
diff --git a/entrypoints/sidepanel/Sidepanel.vue b/entrypoints/sidepanel/Sidepanel.vue
@@ -25,6 +25,7 @@ import {
 } from '@/utils/storage';
 // import getAI from '@/utils/openai';
 
+const textOver = ref(false);
 const isOnline = ref(false);
 const ports = [8000, 8080, 8001, 8081];
 // const devMode = import.meta.env.DEV;
@@ -84,6 +85,10 @@ async function getContent(
   html.value = response.content;
   md.value = await html2md(html.value);
   title.value = response.title;
+  if (title.value.length > 30) {
+    textOver.value = true;
+  }
+  // console.log(html.value);
   if (options.tip) {
     notify({
       message: '刷新成功',
@@ -442,36 +447,44 @@ const toggleInfoDialog = () => {
       <!-- preview -->
       <ElTabPane
         name="preview"
-        class="overflow-y-auto h-screen">
+        class="overflow-y-auto h-[calc(100vh-60px)]">
         <template #label>
           <WI.FaFileTextO /> <span class="ml-1">预览</span>
         </template>
         <div v-if="title">
           <div class="flex items-center justify-center gap-2">
-            <h2>
-              <a
-                :href="link"
-                target="_blank"
-                v-if="link">
-                <img
-                  alt=""
-                  :src="faviconUrl"
-                  class="rounded-full size-4" />
-              </a>
-              {{ title }}
-            </h2>
+            <el-popover
+              :width="300"
+              raw-content
+              :show-after="500">
+              <!-- 鼠标悬停时显示的内容 -->
+              <template #default>
+                {{ title }}
+              </template>
+              <!-- 默认显示的内容 -->
+              <template #reference>
+                <h2 class="line-clamp-2">
+                  <a
+                    :href="link"
+                    target="_blank"
+                    v-if="link && faviconUrl">
+                    <img
+                      alt=""
+                      :src="faviconUrl"
+                      class="rounded-full size-4" />
+                  </a>
+                  {{ title }}
+                </h2>
+              </template>
+            </el-popover>
           </div>
-          <!-- dark:prose-invert -->
           <article
-            class="prose-gray max-w-none prose-sm flex-wrap prose-img:max-w-[300px] prose-img:my-0 prose-img:rounded-md prose-video:max-w-[300px] prose-video:max-h-[300px] prose-video:my-0">
-            <div
-              v-html="html"
-              class="mx-2"
-              style="height: calc(100vh - 150px); overflow-y: auto"></div>
-
-            <!-- <el-backtop
-              :right="50"
-              :bottom="50" /> -->
+            class="prose-gray max-w-none prose-sm flex-wrap prose-img:max-w-[300px] prose-img:my-0 prose-img:rounded-md prose-video:max-w-[300px] prose-video:max-h-[300px] prose-video:my-0 prose-h2:my-2 prose-img:max-h-[300px] overflow-x-hidden h-[calc(100vh-160px)]">
+            <el-scrollbar styl>
+              <div
+                v-html="html"
+                class="mx-2 overflow-x-hidden"></div>
+            </el-scrollbar>
           </article>
         </div>
       </ElTabPane>
@@ -700,7 +713,8 @@ const toggleInfoDialog = () => {
 }
 
 ::v-deep(.el-tabs__content) {
-  height: calc(100vh - 130px);
+  height: calc(100vh - 110px);
+  padding: 5px 10px;
 }
 
 ::v-deep(.el-tabs--border-card) {

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "usewiki2",
   "description": "Convert HTML to Markdown, and save to your computer, support nodejs tiddlywiki",
   "private": true,
-  "version": "4.2.0",
+  "version": "4.2.1",
   "type": "module",
   "scripts": {
     "dev": "wxt",

diff --git a/utils/icons/index.ts b/utils/icons/index.ts
@@ -2,16 +2,20 @@
 export { default as StreamlineAiEditSparkSolid } from '~icons/streamline/ai-edit-spark-solid';
 export { default as MdiSparklesOutline } from '~icons/mdi/sparkles-outline';
 export { default as MdiContentCopy } from '~icons/mdi/content-copy';
-export { default as IconoirSpark } from '~icons/iconoir/spark';
+
+// info
 export { default as CharmGithub } from '~icons/charm/github';
-export { default as MaterialSymbolsDownload } from '~icons/material-symbols/download';
+
+// tabs
 export { default as FaRegularEdit } from '~icons/fa-regular/edit';
 export { default as TdesignSetting } from '~icons/tdesign/setting';
-export { default as MaterialSymbolsInfoOutline } from '~icons/material-symbols/info-outline';
 export { default as FaFileTextO } from '~icons/fa/file-text-o';
+
+// tools
+export { default as MaterialSymbolsDownload } from '~icons/material-symbols/download';
+export { default as MaterialSymbolsInfoOutline } from '~icons/material-symbols/info-outline';
 export { default as FaRegularSave } from '~icons/fa-regular/save';
 export { default as MdiCloudRefreshVariant } from '~icons/mdi/cloud-refresh-variant';
-export { default as OcticonInfo24 } from '~icons/octicon/info-24';
 export { default as SimpleIconsTiddlywiki } from '~icons/simple-icons/tiddlywiki';
 export { default as MdiTagOutline } from '~icons/mdi/tag-outline';
 export { default as PhPencil } from '~icons/ph/pencil';

diff --git a/wxt.config.ts b/wxt.config.ts
@@ -58,8 +58,8 @@ export default defineConfig({
       '128': 'icons/icon128.png',
     },
     name: 'Usewiki2',
+    description: 'TiddlyWiki5 的浏览器扩展',
     omnibox: { keyword: 'tw' },
-    description: 'Usewiki2: usewiki 的 vue 版本',
     permissions: [
       'sidePanel',
       'contextMenus',
@@ -86,7 +86,7 @@ export default defineConfig({
     // },
 
     action: {
-      default_title: '单击打开 Usewiki2',
+      default_title: 'TiddlyWiki5 的浏览器扩展',
     },
     browser_action: {
       // default_popup: 'popup.html',