feat: 美化界面

JuckZ · Oct 20, 2023 · ba35293 · ba35293
1 parent 6bcc77a
commit ba35293
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 36 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -680,7 +680,7 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
  this.app.workspace.setActiveLeaf(newLeaf, false, true);
  },
  ).attachLeaf();
- newLeaf!.openLinkText(e.detail.cursorTarget.title, e.detail.cursorTarget.path);
+ newLeaf!.openLinkText(e.detail.cursorTarget.file.name, e.detail.cursorTarget.path);
  };
  window.addEventListener('mousemove', mouseMoveCallback);
  this.register(() => window.removeEventListener('mousemove', mouseMoveCallback));

diff --git a/src/ui/DataViewTimeLine.vue b/src/ui/DataViewTimeLine.vue
@@ -1,15 +1,56 @@
 <template>
  <div>
+ <div>
+ <n-form
+ ref="formRef"
+ :model="model"
+ label-placement="left"
+ label-width="auto"
+ size="small"
+ :style="{
+ maxWidth: '640px',
+ }"
+ >
+ <n-form-item label="Task" path="taskName">
+ <n-input v-model:value="model.taskName" placeholder="Input" />
+ </n-form-item>
+ <n-form-item label="Status" path="status">
+ <n-select v-model:value="model.status" placeholder="Status" :options="statusList" multiple />
+ </n-form-item>
+ <n-form-item label="Due" path="dueRange">
+ <n-date-picker v-model:value="model.dueRange" type="daterange" clearable />
+ </n-form-item>
+ <n-form-item label="Scheduled" path="scheduledRange">
+ <n-date-picker v-model:value="model.scheduledRange" type="daterange" clearable />
+ </n-form-item>
+ <n-form-item label="Start" path="startRange">
+ <n-date-picker v-model:value="model.startRange" type="daterange" clearable />
+ </n-form-item>
+ </n-form>
+ </div>
  <div class="taskListContainer">
- <div v-for="task in taskList" :key="task.id" @click="onClicked($event, task)">
- <div>
- <input type="checkbox" :checked="task.status !== ' '" @click="onChecked($event, task)" />
- {{ task.text }}
- </div>
- <n-icon @mouseenter="previewTask($event, task)">
- <EyeOutline />
- </n-icon>
- </div>
+ <n-list hoverable clickable>
+ <n-list-item v-for="task in taskList" :key="task.id">
+ <n-thing
+ content-style="margin-top: 10px;"
+ @click="onClicked($event, task)"
+ @mouseenter="previewTask($event, task)"
+ @mouseleave="cancelPreviewTask($event, task)"
+ >
+ <template #description>
+ <n-space size="small" style="margin-top: 4px">
+ <n-tag v-for="tag in task.tags" :key="tag" :bordered="false" type="info" size="small">
+ {{ tag }}
+ </n-tag>
+ </n-space>
+ <n-icon size="20" @click="onChecked($event, task)">
+ <CheckmarkCircleOutline :color="task.status !== ' ' ? 'green' : ''" />
+ </n-icon>
+ {{ task.text }}
+ </template>
+ </n-thing>
+ </n-list-item>
+ </n-list>
  </div>
  </div>
 </template>
@@ -18,8 +59,20 @@
 import { Component, MarkdownPreviewView, MarkdownView, Platform } from 'obsidian';
 import { type SListItem, STask, getAPI as getDataviewApi } from 'obsidian-dataview';
 import { type Ref, ref } from 'vue';
-import { NIcon } from 'naive-ui';
-import { EyeOutline } from '@vicons/ionicons5';
+import {
+ NDatePicker,
+ NForm,
+ NFormItem,
+ NIcon,
+ NInput,
+ NList,
+ NListItem,
+ NSelect,
+ NSpace,
+ NTag,
+ NThing,
+} from 'naive-ui';
+import { CheckmarkCircleOutline } from '@vicons/ionicons5';
 import { debounce } from 'lodash-es';
 import {
  concentrateTasks,
@@ -35,11 +88,38 @@ import { eventTypes } from '@/types/types';
 const keyword = ref('');
 let mdText = ref('');
 const taskList: Ref<STask[]> = ref([]);
+const model = ref({
+ taskName: '',
+ status: [],
+ dueRange: null,
+ scheduledRange: null,
+ startRange: null,
+});
+// 🟠🟣🟤⚫
+const statusList = ref([
+ {
+ label: '🔵 Active',
+ value: ' ', // ' '
+ },
+ {
+ label: '🟢 Completed',
+ value: 'x', // x
+ },
+ {
+ label: '🟡 Ing',
+ value: 'd', // d /
+ },
+ {
+ label: '🔴 Cancelled',
+ value: 'C', // C
+ },
+]);
 
 const DataviewAPI = getDataviewApi();
 const searchHandle = async () => {
  // query
  // mdText.value = (await DataviewAPI.queryMarkdown(listTasks)).value;
+ // TODO 按照表单条件查询任务
  const res = await DataviewAPI.query(concentrateTasks);
  taskList.value = res.value.values;
 };
@@ -52,19 +132,26 @@ const refreshOperation = async () => {
 };
 // DataviewAPI.index.onChange(refreshOperation);
 app.workspace.on('dataview:refresh-views', refreshOperation);
-
-const debouncePreview = debounce((event, item: STask) => {
- const evt = new CustomEvent(eventTypes.previewCursor, {
- detail: {
- originEvent: event,
- cursorTarget: item,
- },
- });
- window.dispatchEvent(evt);
-}, 400);
+let lastHoverTask: STask = null;
+let lastTimer = null;
 const previewTask = async (event, item: STask) => {
- // 延迟触发，鼠标移出后取消触发
- debouncePreview(event, item);
+ // 延迟触发 当悬停在同一个任务上600ms时，触发 previewTask
+ lastHoverTask = item;
+ lastTimer = setTimeout(() => {
+ if (item.id === lastHoverTask.id) {
+ const evt = new CustomEvent(eventTypes.previewCursor, {
+ detail: {
+ originEvent: event,
+ cursorTarget: item,
+ },
+ });
+ window.dispatchEvent(evt);
+ }
+ }, 600);
+};
+// 鼠标移出后取消触发
+const cancelPreviewTask = async (event, item: STask) => {
+ clearTimeout(lastTimer);
 };
 
 type SelectionState = {
@@ -98,8 +185,8 @@ const onClicked = async (evt, item: STask) => {
 
 const onChecked = async (evt, item: STask) => {
  evt.stopPropagation();
- const completed = evt.currentTarget.checked;
- const status = completed ? 'x' : ' ';
+ const completed = item.checked;
+ const status = completed ? ' ' : 'x';
  // Update data-task on the parent element (css style)
  const parent = evt.currentTarget.parentElement;
  parent?.setAttribute('data-task', status);

diff --git a/src/ui/TaskSelector.vue b/src/ui/TaskSelector.vue
@@ -1,10 +1,17 @@
 <template>
  <div>
- <div class="selectorTrigger" @click="openSelectorModal">专注 &gt;</div>
+ <span class="cursor-pointer flex items-center p1" @click="openSelectorModal">
+ <n-gradient-text type="info" class="mr1"> 快捷添加 </n-gradient-text>
+ <n-icon size="20" color="rgb(178, 209, 244)">
+ <AddCircleOutline />
+ </n-icon>
+ </span>
+
  <n-modal
  v-model:show="showModal"
  :mask-closable="true"
  preset="dialog"
+ :show-icon="false"
  @positive-click="onPositiveClick"
  @negative-click="onNegativeClick"
  >
@@ -14,9 +21,10 @@
 </template>
 
 <script setup lang="ts">
-import { NModal, useMessage } from 'naive-ui';
+import { NGradientText, NIcon, NModal, useMessage } from 'naive-ui';
 import { Component, MarkdownPreviewView, MarkdownView, Platform } from 'obsidian';
 import { type Ref, ref } from 'vue';
+import { AddCircleOutline } from '@vicons/ionicons5';
 import DataViewTimeLine from '@/ui/DataViewTimeLine.vue';
 import { CommonModal } from '@/ui/modal';
 import {
@@ -58,9 +66,4 @@ const openSelectorModal = () => {
 };
 </script>
 
-<style lang="scss" scoped>
-.selectorTrigger {
- cursor: pointer;
- padding: 5px;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/ui/TestTitle.tsx b/src/ui/TestTitle.tsx
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { NGradientText } from 'naive-ui';
 import t from '@/i18n';
 
 export default defineComponent({
@@ -9,6 +10,6 @@ export default defineComponent({
 
 const A = defineComponent({
  setup() {
- return () => <>{t.info.Pomodoro}</>;
+ return () => <NGradientText type="primary">{t.info.Pomodoro}</NGradientText>;
  },
 });
diff --git a/src/ui/popover.ts b/src/ui/popover.ts
@@ -172,7 +172,8 @@ export class HoverEditor extends nosuper(HoverPopover) {
  }
 
  setInitialDimensions() {
- this.hoverEl.style.zIndex = '99999';
+ // TODO 动态调整zIndex，因为会遮挡其他popover
+ this.hoverEl.style.zIndex = '2000';
  this.hoverEl.style.height = SETTINGS.initialHeight.value;
  this.hoverEl.style.width = SETTINGS.initialWidth.value;
  }