## 0.15.0: note 增加展开按钮

### - note 增加展开按钮(240px) ### fix - home 添加弹窗多余的显示 - bookmark 的书签快速保存
glennliao · Dec 8, 2023 · 3038821 · 3038821
1 parent da34000
commit 3038821
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 11 deletions.
diff --git a/ui/components.d.ts b/ui/components.d.ts
@@ -23,10 +23,10 @@ declare module 'vue' {
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
-    ALayoutFooter: typeof import('ant-design-vue/es')['LayoutFooter']
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']

diff --git a/ui/src/router/index.ts b/ui/src/router/index.ts
@@ -19,7 +19,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Index',
-    redirect: '/home'
+    redirect: location.href.includes("?url=")?'/bookmark':"/home"
   },
   {
     path: '/login',

diff --git a/ui/src/views/home/components/EditModal.vue b/ui/src/views/home/components/EditModal.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { apiJson } from '@/api'
+import {ref} from 'vue'
 
-const emit = defineEmits("refresh")
+const emit = defineEmits(["refresh"])
 const openModel = ref(false)
 const editInfo = ref({})
 
@@ -12,7 +13,6 @@ const open = () => {
 }
 
 const submit = ()=>{
-  console.log("subm",editInfo, editInfo.value)
   apiJson.post({
     "AppList":{
       ...toRaw(editInfo.value)
@@ -37,7 +37,6 @@ defineExpose({
            @ok="submit"
   >
     <a-form>
-      {{editInfo}}
       <a-form-item label="title">
         <a-input v-model:value="editInfo.title"></a-input>
       </a-form-item>

diff --git a/ui/src/views/note/components/Render.vue b/ui/src/views/note/components/Render.vue
@@ -64,10 +64,12 @@ watch(() => [props.content, props.tags], (e) => {
 </script>
 
 <template>
-  <view>
-    <MdPreview showCodeRowNumber :editorId="id" :modelValue="text" />
-<!--    <MdCatalog :editorId="id" :scrollElement="scrollElement" />-->
-  </view>
+
+  <MdPreview showCodeRowNumber :editorId="id" :modelValue="text" />
+<!--  <div>-->
+<!--    <MdPreview showCodeRowNumber :editorId="id" :modelValue="text" />-->
+<!--&lt;!&ndash;    <MdCatalog :editorId="id" :scrollElement="scrollElement" />&ndash;&gt;-->
+<!--  </div>-->
 </template>
 
 <style lang="scss">

diff --git a/ui/src/views/note/index.vue b/ui/src/views/note/index.vue
@@ -23,8 +23,17 @@
         </a-col>
         <a-col :sm="24" :md="18" class="w-full">
 
-          <div class="note-item shadow rounded  w-full" v-for="item in list" :key="item.noteId">
-            <render :tags="item.tags" :content="item.content.markdown" style="display: block"/>
+          <div class="note-item shadow rounded  w-full " v-for="(item,index) in list" :key="item.noteId">
+            <div class="max-note-height relative"  :style="{
+              '--note-max-height': item.openFlag?'auto':'240px',
+              paddingBottom:item.needOpenFlag?'20px':0
+            }">
+              <render :id="item.noteId" @onHtmlChanged="onHtmlChange(item,index)" :tags="item.tags" :content="item.content.markdown" style="display: block"/>
+              <div v-if="item.needOpenFlag" @click="item.openFlag = !item.openFlag" class="cursor-pointer text-white" style="position: absolute;background: rgb(139 139 139 / 66%);bottom:0;width:100%;text-align: center;height: 20px;line-height: 20px">
+                  展开 / 收起
+              </div>
+            </div>
+
             <div class="flex justify-end" style="border-top: 1px solid rgba(213,213,213,0.53);padding: 6px 12px;background: #e0e0e069">
               <a-button size="small" danger class="mr-2" @click="del(item)">del</a-button>
               <a-button size="small" @click="edit(item)">Edit</a-button>
@@ -114,6 +123,8 @@ function loadList(searchKey = '') {
     list.value = data.list.map(item => {
       item.content = JSON.parse(item.content)
       item.tags = JSON.parse(item.tags || '[]')
+      item.openFlag = false
+      item.needOpenFlag = false
       return item
     })
   })
@@ -198,7 +209,23 @@ onMounted(()=>{
   searchInput.value && searchInput.value.focus()
 })
 
+
+const onHtmlChange = (item, index)=>{
+  const noteId = item.noteId
+  const h = document.getElementById(noteId).clientHeight
+  if (h > 240){
+    item.needOpenFlag = true
+    list.value[index] = item
+  }
+
+  item.height = h
+
+  console.log(item)
+}
 </script>
+
+
+
 <style scoped lang="scss">
 
 .note-item {
@@ -211,4 +238,9 @@ onMounted(()=>{
   color: white;
 }
 
+.max-note-height {
+  max-height: var(--note-max-height);
+  overflow: hidden;
+}
+
 </style>