From e800d0b3433728e427b8cf91845f2e4ce195b2f3 Mon Sep 17 00:00:00 2001
From: oeyoews <jyao4783@gmail.com>
Date: Wed, 24 Jul 2024 13:30:39 +0800
Subject: [PATCH] fix: remove el-panel

---
 entrypoints/sidepanel/Sidepanel.vue          | 518 +++++++++----------
 entrypoints/sidepanel/components/Actions.vue |  32 +-
 hooks/useToggle.ts                           |  15 +
 package.json                                 |   2 +-
 utils/icons/index.ts                         |   1 +
 5 files changed, 290 insertions(+), 278 deletions(-)
 create mode 100644 hooks/useToggle.ts

diff --git a/entrypoints/sidepanel/Sidepanel.vue b/entrypoints/sidepanel/Sidepanel.vue
index db0e01c..320d350 100644
--- a/entrypoints/sidepanel/Sidepanel.vue
+++ b/entrypoints/sidepanel/Sidepanel.vue
@@ -4,7 +4,7 @@ import 'element-plus/theme-chalk/dark/css-vars.css';
 import 'element-plus/es/components/notification/style/css';
 import 'element-plus/es/components/message-box/style/css';
 import GridBg from '@/components/GridBg.vue';
-import Actions from './components/Actions.vue';
+import Actions, { type ICommand } from './components/Actions.vue';
 import Info from './components/Info.vue';
 import { formattime } from '@/utils/formattime';
 import * as utils from '@/utils/utils';
@@ -32,6 +32,7 @@ import {
 import { useContent } from '@/hooks/useContent';
 
 const isHome = ref(true);
+const isRead = ref(true);
 const { loading, html, md, link, faviconUrl, title, getContent } = useContent();
 const { isDarkMode, toggleDark } = useDarkMode();
 
@@ -253,32 +254,27 @@ async function saveAuth(option: { username: string; password: string }) {
   }
 }
 
-const handleCommand = async (cmd: string, components: any, e: MouseEvent) => {
-  switch (cmd) {
-    case 'journal':
-      addJournal();
-      break;
-    case 'info':
+const handleCommand = async (cmd: ICommand, components: any, e: MouseEvent) => {
+  const actions: Record<ICommand, Function> = {
+    tiddlywiki: () => {
+      isHome.value = !isHome.value;
+    },
+    journal: addJournal,
+    info: () => {
       infoDialogStatus.value = !infoDialogStatus.value;
-      break;
-    case 'setup':
+    },
+    setup: () => {
       setupDialogStatus.value = true;
-      break;
-    case 'copy':
-      copyMd(md.value);
-      break;
-    case 'download':
-      saveMarkdown(md.value, title.value!);
-      break;
-    case 'refresh':
-      getContent({ tip: true });
-      break;
-    case 'darkmode':
-      await toggleDark(e);
-      break;
-    default:
-      break;
-  }
+    },
+    copy: () => copyMd(md.value),
+    download: () => saveMarkdown(md.value, title.value!),
+    refresh: () => getContent({ tip: true }),
+    darkmode: () => toggleDark(e),
+    edit: () => {
+      isRead.value = !isRead.value;
+    },
+  };
+  actions[cmd](e);
 };
 
 // const onGoHome = () => {
@@ -302,13 +298,6 @@ const handleCommand = async (cmd: string, components: any, e: MouseEvent) => {
       class="backdrop-blur-sm z-[999] flex justify-end items-center inset-x-0 gap-1 p-2 px-6"
       v-if="isHome">
       <!-- 下拉框 -->
-      <el-button
-        @click="isHome = false"
-        size="default"
-        type="primary"
-        plain
-        >进入太微</el-button
-      >
       <Actions
         :isCheckTw5
         :command="handleCommand"
@@ -329,258 +318,239 @@ const handleCommand = async (cmd: string, components: any, e: MouseEvent) => {
   <div
     class="mx-2 fixed top-[50px] w-[95%]"
     v-if="isHome">
-    <ElTabs
-      stretch
-      type="border-card"
-      :model-value="currentTab">
-      <!-- preview -->
-      <ElTabPane
-        name="preview"
-        class="overflow-y-auto h-[calc(100vh-105px)]">
-        <template #label>
-          <WI.FaFileTextO /> <span class="ml-1">预览</span>
-        </template>
+    <div v-show="isRead">
+      <div
+        class="flex items-center justify-center gap-2"
+        v-if="title">
+        <el-popover
+          :width="300"
+          raw-content
+          :show-after="500">
+          <!-- 鼠标悬停时显示的内容 -->
+          <template #default>
+            {{ title }}
+          </template>
+          <!-- 默认显示的内容 -->
+          <template #reference>
+            <h2 class="line-clamp-1">
+              <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>
+
+      <div
+        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)]">
+        <div class="h-full overflow-x-hidden article">
+          <el-scrollbar>
+            <el-skeleton
+              :loading
+              animated
+              :count="4"
+              :throttle="100">
+              <template #template>
+                <div class="px-3 py-5">
+                  <el-skeleton-item
+                    variant="text"
+                    class="!w-1/2" />
+                  <el-skeleton-item
+                    variant="p"
+                    class="w-1/2 h-24" />
+                  <div class="flex justify-between items-center">
+                    <el-skeleton-item
+                      variant="text"
+                      class="mr-4" />
+                    <el-skeleton-item
+                      variant="text"
+                      class="!w-1/4" />
+                  </div>
+                </div>
+              </template>
+            </el-skeleton>
+            <div
+              v-html="html"
+              class="mx-2 overflow-x-hidden"></div>
+          </el-scrollbar>
+        </div>
+      </div>
+    </div>
+
+    <!-- edit -->
+    <!-- :disabled="!isCheckTw5" -->
+    <div v-show="!isRead">
+      <ElInput
+        type="text"
+        size="large"
+        v-model="title"
+        class="mb-4" />
 
+      <ElInput
+        ref="editRef"
+        placeholder="写点什么吧 ..."
+        size="large"
+        v-model="md"
+        @keyup.enter.ctrl="handleSave"
+        @input="debounceEdit"
+        :autosize="{ minRows: 4, maxRows: 27 }"
+        type="textarea"
+        spellcheck="false"
+        class="w-full border-none overflow-y"
+        resize="none" />
+    </div>
+
+    <!-- setup -->
+    <el-dialog
+      v-model="setupDialogStatus"
+      width="90%"
+      align-center>
+      <div class="items-center mx-2">
         <div>
-          <div
-            class="flex items-center justify-center gap-2"
-            v-if="title">
-            <el-popover
-              :width="300"
-              raw-content
-              :show-after="500">
-              <!-- 鼠标悬停时显示的内容 -->
-              <template #default>
-                {{ title }}
-              </template>
-              <!-- 默认显示的内容 -->
-              <template #reference>
-                <h2 class="line-clamp-1">
-                  <a
-                    :href="link"
-                    target="_blank"
-                    v-if="link && faviconUrl">
-                    <img
-                      alt=""
-                      :src="faviconUrl"
-                      class="rounded-full size-4" />
-                  </a>
-                  {{ title }}
-                </h2>
-              </template>
-            </el-popover>
+          <h2>登录</h2>
+          <div class="flex gap-2">
+            <el-form
+              size="large"
+              :spellcheck="false"
+              label-width="68px"
+              label-position="top">
+              <el-form-item label="用户名">
+                <ElInput
+                  v-model.trim.number="username"
+                  :prefix-icon="WI.MingcuteUser4Line"
+                  minlength="3"
+                  maxlength="20"
+                  show-word-limit
+                  placeholder="请输入用户名" />
+              </el-form-item>
+              <el-form-item label="密码">
+                <ElInput
+                  minlength="4"
+                  maxlength="20"
+                  :prefix-icon="WI.MynauiLockPassword"
+                  v-model.trim.number="password"
+                  type="password"
+                  placeholder="请输入密码"
+                  show-password />
+              </el-form-item>
+              <el-form-item label="">
+                <ElButton
+                  type="primary"
+                  plain
+                  :disabled="isChecking"
+                  @click="
+                    saveAuth({
+                      username,
+                      password,
+                    })
+                  ">
+                  保存
+                </ElButton>
+              </el-form-item>
+            </el-form>
           </div>
+        </div>
 
-          <div
-            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)]">
-            <div class="h-full overflow-x-hidden article">
-              <el-scrollbar>
-                <el-skeleton
-                  :loading
-                  animated
-                  :count="4"
-                  :throttle="100">
-                  <template #template>
-                    <div class="px-3 py-5">
-                      <el-skeleton-item
-                        variant="text"
-                        class="!w-1/2" />
-                      <el-skeleton-item
-                        variant="p"
-                        class="w-1/2 h-24" />
-                      <div class="flex justify-between items-center">
-                        <el-skeleton-item
-                          variant="text"
-                          class="mr-4" />
-                        <el-skeleton-item
-                          variant="text"
-                          class="!w-1/4" />
-                      </div>
-                    </div>
+        <div>
+          <h2>端口号</h2>
+          <div class="flex gap-2">
+            <!-- :prefix-icon="WI.GameIconsHole" -->
+            <ElInput
+              v-model.trim.number="port"
+              size="large"
+              maxlength="5"
+              minlength="1"
+              @keyup.enter="savePort(port)"
+              placeholder="请输入端口号">
+              <template #prepend>
+                <el-select
+                  size="large"
+                  v-model="port"
+                  placeholder="端口"
+                  style="width: 98px">
+                  <template v-for="(port, index) in ports">
+                    <el-option
+                      :label="`端口${index + 1} (${port})`"
+                      :value="port" />
                   </template>
-                </el-skeleton>
-                <div
-                  v-html="html"
-                  class="mx-2 overflow-x-hidden"></div>
-              </el-scrollbar>
-            </div>
+                </el-select>
+              </template>
+            </ElInput>
+            <ElButton
+              size="large"
+              type="primary"
+              plain
+              @click="savePort(port)"
+              :disabled="isChecking"
+              >保存</ElButton
+            >
           </div>
         </div>
-      </ElTabPane>
-
-      <!-- edit -->
-      <!-- :disabled="!isCheckTw5" -->
-      <ElTabPane name="edit">
-        <template #label>
-          <WI.FaRegularEdit />
-          <span class="ml-1">编辑</span>
-        </template>
-
-        <ElInput
-          type="text"
-          size="large"
-          v-model="title"
-          class="mb-4" />
-
-        <ElInput
-          ref="editRef"
-          placeholder="写点什么吧 ..."
-          size="large"
-          v-model="md"
-          @keyup.enter.ctrl="handleSave"
-          @input="debounceEdit"
-          :autosize="{ minRows: 4, maxRows: 27 }"
-          type="textarea"
-          spellcheck="false"
-          class="w-full border-none overflow-y"
-          resize="none" />
-      </ElTabPane>
-
-      <!-- setup -->
-      <el-dialog
-        v-model="setupDialogStatus"
-        width="90%"
-        align-center>
-        <div class="items-center mx-2">
-          <div>
-            <h2>登录</h2>
-            <div class="flex gap-2">
-              <el-form
-                size="large"
-                :spellcheck="false"
-                label-width="68px"
-                label-position="top">
-                <el-form-item label="用户名">
-                  <ElInput
-                    v-model.trim.number="username"
-                    :prefix-icon="WI.MingcuteUser4Line"
-                    minlength="3"
-                    maxlength="20"
-                    show-word-limit
-                    placeholder="请输入用户名" />
-                </el-form-item>
-                <el-form-item label="密码">
-                  <ElInput
-                    minlength="4"
-                    maxlength="20"
-                    :prefix-icon="WI.MynauiLockPassword"
-                    v-model.trim.number="password"
-                    type="password"
-                    placeholder="请输入密码"
-                    show-password />
-                </el-form-item>
-                <el-form-item label="">
-                  <ElButton
-                    type="primary"
-                    plain
-                    :disabled="isChecking"
-                    @click="
-                      saveAuth({
-                        username,
-                        password,
-                      })
-                    ">
-                    保存
-                  </ElButton>
-                </el-form-item>
-              </el-form>
-            </div>
-          </div>
 
-          <div>
-            <h2>端口号</h2>
-            <div class="flex gap-2">
-              <!-- :prefix-icon="WI.GameIconsHole" -->
-              <ElInput
-                v-model.trim.number="port"
-                size="large"
-                maxlength="5"
-                minlength="1"
-                @keyup.enter="savePort(port)"
-                placeholder="请输入端口号">
-                <template #prepend>
-                  <el-select
-                    size="large"
-                    v-model="port"
-                    placeholder="端口"
-                    style="width: 98px">
-                    <template v-for="(port, index) in ports">
-                      <el-option
-                        :label="`端口${index + 1} (${port})`"
-                        :value="port" />
-                    </template>
-                  </el-select>
-                </template>
-              </ElInput>
-              <ElButton
-                size="large"
-                type="primary"
-                plain
-                @click="savePort(port)"
-                :disabled="isChecking"
-                >保存</ElButton
-              >
-            </div>
+        <div v-show="isCheckTw5">
+          <h2>标签</h2>
+          <!-- tag -->
+          <div class="flex gap-2">
+            <ElTag
+              size="large"
+              v-for="tag in dynamicTags"
+              :key="tag"
+              closable
+              :disable-transitions="false"
+              @close="handleClose(tag)">
+              <div class="flex items-center gap-2">
+                <WI.MdiTagOutline />
+                {{ tag }}
+              </div>
+            </ElTag>
+            <ElInput
+              size="large"
+              v-if="inputVisible"
+              ref="InputRef"
+              v-model="inputValue"
+              class="w-20"
+              @keyup.enter="handleInputConfirm"
+              @blur="handleInputConfirm" />
+
+            <ElButton
+              v-else
+              class="button-new-tag"
+              size="default"
+              type="primary"
+              plain
+              @click="showInput">
+              +
+            </ElButton>
           </div>
-
-          <div v-show="isCheckTw5">
-            <h2>标签</h2>
-            <!-- tag -->
-            <div class="flex gap-2">
-              <ElTag
-                size="large"
-                v-for="tag in dynamicTags"
-                :key="tag"
-                closable
-                :disable-transitions="false"
-                @close="handleClose(tag)">
-                <div class="flex items-center gap-2">
-                  <WI.MdiTagOutline />
-                  {{ tag }}
-                </div>
-              </ElTag>
-              <ElInput
-                size="large"
-                v-if="inputVisible"
-                ref="InputRef"
-                v-model="inputValue"
-                class="w-20"
-                @keyup.enter="handleInputConfirm"
-                @blur="handleInputConfirm" />
-
-              <ElButton
-                v-else
-                class="button-new-tag"
-                size="default"
-                type="primary"
-                plain
-                @click="showInput">
-                +
-              </ElButton>
-            </div>
-          </div>
-
-          <h2>连接TiddlyWiki5</h2>
-          <el-switch
-            size="large"
-            :before-change="checkTwStatus"
-            :loading="isChecking"
-            inline-prompt
-            v-model="isCheckTw5"
-            :inactive-icon="WI.SimpleIconsTiddlywiki"
-            :active-icon="WI.SimpleIconsTiddlywiki" />
         </div>
-      </el-dialog>
-
-      <el-dialog
-        v-model="infoDialogStatus"
-        width="80%"
-        align-center>
-        <Info
-          :status
-          :json="json" />
-      </el-dialog>
-    </ElTabs>
+
+        <h2>连接TiddlyWiki5</h2>
+        <el-switch
+          size="large"
+          :before-change="checkTwStatus"
+          :loading="isChecking"
+          inline-prompt
+          v-model="isCheckTw5"
+          :inactive-icon="WI.SimpleIconsTiddlywiki"
+          :active-icon="WI.SimpleIconsTiddlywiki" />
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      v-model="infoDialogStatus"
+      width="80%"
+      align-center>
+      <Info
+        :status
+        :json="json" />
+    </el-dialog>
   </div>
 </template>
 
diff --git a/entrypoints/sidepanel/components/Actions.vue b/entrypoints/sidepanel/components/Actions.vue
index 4dd5939..4a0ef3c 100644
--- a/entrypoints/sidepanel/components/Actions.vue
+++ b/entrypoints/sidepanel/components/Actions.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import * as WI from '@/utils/icons';
+import type { FunctionalComponent } from 'vue';
 interface IProps {
   command: any;
   /** check tw5 */
@@ -7,22 +8,45 @@ interface IProps {
   defaultCommand: any;
 }
 const props = defineProps<IProps>();
-const actions = [
+
+type IAction<T> = {
+  name: string;
+  icon: FunctionalComponent;
+  command: T;
+  divided?: boolean;
+  condition?: boolean;
+};
+
+function defineAction<T extends string>(actions: Array<IAction<T>>) {
+  return actions;
+}
+
+const actions = defineAction([
   {
     name: '日记',
     icon: WI.PhPencil,
     command: 'journal',
     condition: props.isCheckTw5,
   },
+  {
+    name: '编辑',
+    icon: WI.CharmBookOpen,
+    command: 'edit',
+  },
   {
     name: '详情',
     icon: WI.MaterialSymbolsInfoOutline,
     command: 'info',
   },
+  {
+    name: '太微',
+    icon: WI.SimpleIconsTiddlywiki,
+    command: 'tiddlywiki',
+  },
   {
     name: '配置',
     icon: WI.LetsIconsSettingAltLine,
-    comand: 'setup',
+    command: 'setup',
   },
   {
     name: '下载',
@@ -45,7 +69,9 @@ const actions = [
     icon: WI.MdiCloudRefreshVariant,
     command: 'refresh',
   },
-];
+]);
+
+export type ICommand = (typeof actions)[number]['command'];
 </script>
 
 <template>
diff --git a/hooks/useToggle.ts b/hooks/useToggle.ts
new file mode 100644
index 0000000..13cbace
--- /dev/null
+++ b/hooks/useToggle.ts
@@ -0,0 +1,15 @@
+import { ref } from 'vue';
+
+function useToggle(initialValue = false) {
+  const state = ref(initialValue);
+  const toggle = () => {
+    state.value = !state.value;
+  };
+
+  return {
+    state,
+    toggle,
+  };
+}
+
+export default useToggle;
diff --git a/package.json b/package.json
index 92a5ec2..3ac2309 100644
--- 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.8.3",
+  "version": "4.8.4",
   "type": "module",
   "scripts": {
     "dev": "wxt --mode development",
diff --git a/utils/icons/index.ts b/utils/icons/index.ts
index bc29578..51dbc4c 100644
--- a/utils/icons/index.ts
+++ b/utils/icons/index.ts
@@ -5,6 +5,7 @@ export { default as MdiContentCopy } from '~icons/mdi/content-copy';
 
 // info
 export { default as CharmGithub } from '~icons/charm/github';
+export { default as CharmBookOpen } from '~icons/charm/book-open';
 
 // tabs
 export { default as FaRegularEdit } from '~icons/fa-regular/edit';