🔀 Merge(dev): v1.3.0

- ✨ feat: 支持传入变量如当前文档id [#14](#14) - 相关用法已更新 README - ✨ feat: 支持从文档树中直接拖入文档加入书签中 [#16](#16)
frostime · Aug 26, 2024 · 4603e05 · 4603e05
2 parents 1f88c5f + 1f2dd43
commit 4603e05
Show file tree

Hide file tree

Showing 19 changed files with 360 additions and 175 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 ## Changelog
 
+## v1.3.0
+
+- ✨ feat: 支持传入变量如当前文档id  [#14](https://github.com/frostime/sy-bookmark-plus/issues/14)
+  - 相关用法已更新 README
+- ✨ feat: 支持从文档树中直接拖入文档加入书签中 [#16](https://github.com/frostime/sy-bookmark-plus/issues/16)
+
 ## v1.2.3
 
 - ⚡ perf: 适配优化移动端 [#13](https://github.com/frostime/sy-bookmark-plus/issues/13)

diff --git a/README.md b/README.md
@@ -57,6 +57,38 @@ Dynamic bookmark groups mainly acquire bookmark items by executing queries.
 
 ![](./asset/dynamic-group.gif)
 
+### Variable Rendering
+
+In dynamic groups, variable rendering is supported based on `{{VarName}}`. Variable rendering allows you to insert dynamic variables into rules, which will be replaced with actual values during rendering. Currently supported variables include:
+
+* `{{CurDocId}}`: ID of the currently active document
+* `{{CurRootId}}`: Alias of `{{CurDocId}}`
+* `{{yyyy}}`: Current year (four digits)
+* `{{MM}}`: Current month (two digits)
+* `{{dd}}`: Current day (two digits)
+* `{{yy}}`: Last two digits of the current year
+* `{{today}}`: Current date (equivalent to `{{yyyy}}{{MM}}{{dd}}`)
+
+Example 1, SQL rule: View all updates for the current month
+
+```sql
+select * from blocks where
+type='d' and updated like '{{yyyy}}{{MM}}%'
+order by updated desc
+```
+
+Example 2, Attribute rule: View all daily notes for the current month
+
+```
+custom-dailynote-% like {{yyyy}}{{MM}}%
+```
+
+Example 3, Backlink rule: View backlinks that refer to the current active document:
+
+```
+{{CurDocId}}
+```
+
 ## Bookmark Items
 
 * Click an item to navigate to the corresponding block

diff --git a/README_zh_CN.md b/README_zh_CN.md
@@ -59,6 +59,38 @@
 
 ![](./asset/dynamic-group.gif)
 
+### 变量渲染
+
+在动态组中，支持基于 `{{VarName}}` 的变量渲染。变量渲染允许你在规则中插入一些动态变量，这些变量会在渲染时被替换为实际的值。目前支持的变量包括：
+
+* `{{CurDocId}}`：当前活动文档的 ID
+* `{{CurRootId}}`：`{{CurDocId}}` 的别名，二者等价
+* `{{yyyy}}`：当前年份（四位数）
+* `{{MM}}`：当前月份（两位数）
+* `{{dd}}`：当前日期（两位数）
+* `{{yy}}`：当前年份的后两位数
+* `{{today}}`：当前日期（等价于 `{{yyyy}}{{MM}}{{dd}}`）
+
+
+案例1，SQL 规则：查看本月所有更新
+
+```sql
+select * from blocks where
+type='d' and updated like '{{yyyy}}{{MM}}%'
+order by updated desc
+```
+
+案例2，属性规则：查看本月所有日记
+
+```
+custom-dailynote-% like {{yyyy}}{{MM}}%
+```
+
+案例3，反链规则：查看当前文档的反链:
+
+```
+{{CurDocId}}
+```
 
 ## 书签项目
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sy-bookmark-plus",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "type": "module",
   "description": "A more powerful bookmark",
   "repository": "",

diff --git a/plugin.json b/plugin.json
@@ -2,7 +2,7 @@
   "name": "sy-bookmark-plus",
   "author": "frostime",
   "url": "https://github.com/frostime/sy-bookmark-plus",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "minAppVersion": "3.0.12",
   "backends": [
     "all"

diff --git a/src/components/group.tsx b/src/components/group.tsx
@@ -332,6 +332,10 @@ const Group: Component<Props> = (props) => {
             event.preventDefault();
             event.dataTransfer.dropEffect = "copy";
             setIsDragOver(true);
+        } else if (type.startsWith(Constants.SIYUAN_DROP_FILE)) {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "copy";
+            setIsDragOver(true);
         } else if (type === 'bookmark/item') {
             event.preventDefault();
             event.dataTransfer.dropEffect = "move";
@@ -358,6 +362,21 @@ const Group: Component<Props> = (props) => {
             const info = meta.split(Constants.ZWSP);
             const nodeId = info[2];
             addItemByBlockId(nodeId);
+        }  else if (type.startsWith(Constants.SIYUAN_DROP_FILE)) {
+            const ele: HTMLElement = window.siyuan.dragElement;
+            if (ele && ele.innerText) {
+                const blockid = ele.innerText;
+                //if '/', it might be the box other than document
+                if (blockid && blockid !== '/') {
+                    addItemByBlockId(blockid);
+                }
+                //Clean up the effect of dragging element
+                const item: HTMLElement = document.querySelector(`.file-tree.sy__tree li[data-node-id="${blockid}"]`);
+                if (item) {
+                    item.style.opacity = "1";
+                }
+                window.siyuan.dragElement = undefined;
+            }
         } else if (type === 'bookmark/item') {
             model.moveItem(itemMoving());
         }

diff --git a/src/components/new-group.tsx b/src/components/new-group.tsx
@@ -1,7 +1,8 @@
 import { Accessor, createMemo, createSignal, Setter, Show } from "solid-js";
 
-import ItemWrap from "@/libs/components/item-wrap";
-import InputItem from "@/libs/components/item-input";
+// import ItemWrap from "@/libs/components/item-wrap";
+// import InputItem from "@/libs/components/item-input";
+import Form from "@/libs/components/Form";
 import Icon from "./icon";
 
 import { i18n } from "@/utils/i18n";
@@ -33,7 +34,7 @@ const RuleInput = () => {
     const render = () => {
         if (ruleType() === 'attr') {
             return (
-                <InputItem
+                <Form.Input
                     key="ruleInput"
                     value={ruleInput()}
                     type='textinput'
@@ -45,7 +46,7 @@ const RuleInput = () => {
             );
         } else if (ruleType() === 'sql') {
             return (
-                <InputItem
+                <Form.Input
                     key="ruleInput"
                     value={ruleInput()}
                     type='textarea'
@@ -66,7 +67,7 @@ const RuleInput = () => {
             }
             return (
                 <>
-                    <InputItem
+                    <Form.Input
                         key="ruleInput"
                         value={id}
                         type='textinput'
@@ -92,7 +93,7 @@ const RuleInput = () => {
                             />
                         </span>
                         <div class="b3-label__text fn__flex-1">{i18nPost.name}</div>
-                        <InputItem
+                        <Form.Input
                             key="ruleInput"
                             value={process}
                             type='select'
@@ -173,11 +174,11 @@ const RuleEditor = () => {
 
     return (
         <div style={{ display: "flex", "flex-direction": 'column' }}>
-            <ItemWrap
+            <Form.Wrap
                 title={i18n_.rtype[0]}
                 description={i18n_.rtype[1]}
             >
-                <InputItem
+                <Form.Input
                     key="ruleType"
                     value={ruleType()}
                     type="select"
@@ -192,40 +193,39 @@ const RuleEditor = () => {
                         setRuleInput('');
                     }}
                 />
-            </ItemWrap>
-            <ItemWrap
+            </Form.Wrap>
+            <Form.Wrap
                 title={i18n_.rinput}
                 description={aboutRule().desc}
                 direction={aboutRule().direction}
+                action={
+                    <Show when={['sql', 'attr'].includes(ruleType())}>
+                        <div style={{
+                            display: "flex",
+                            gap: '10px',
+                            padding: '0px',
+                            margin: 0,
+                            'align-items': 'center'
+                        }}>
+                            <span class="b3-label__text">{i18n_.choosetemplate}</span>
+                            <Form.Input
+                                key="ruleTemplate"
+                                value={'no'}
+                                options={templateToSelect()}
+                                type='select'
+                                changed={(key) => {
+                                    let temp = template()[key].trim();
+                                    setRuleInput(temp);
+                                    setRule({ input: temp });
+                                }}
+                                style={{ 'width': '130px' }}
+                            />
+                        </div>
+                    </Show>
+                }
             >
-                <Show when={['sql', 'attr'].includes(ruleType())}>
-                    <div style={{
-                        display: "flex",
-                        gap: '10px',
-                        position: 'absolute',
-                        right: '0px',
-                        top: '-60px',
-                        padding: '0px',
-                        margin: 0,
-                        'align-items': 'center'
-                    }}>
-                        <span class="b3-label__text">{i18n_.choosetemplate}</span>
-                        <InputItem
-                            key="ruleTemplate"
-                            value={'no'}
-                            options={templateToSelect()}
-                            type='select'
-                            changed={(key) => {
-                                let temp = template()[key].trim();
-                                setRuleInput(temp);
-                                setRule({ input: temp });
-                            }}
-                            style={{ 'width': '130px' }}
-                        />
-                    </div>
-                </Show>
                 <RuleInput />
-            </ItemWrap>
+            </Form.Wrap>
         </div>
     );
 }
@@ -250,32 +250,32 @@ const NewGroup = (props: IPrpos) => {
     const transitionDuration = 100;
 
     return (
-        <div class="config__tab-container fn__flex fn__flex-1 fn__flex-column"
+        <div class="fn__flex fn__flex-1 fn__flex-column"
             onkeydown={(e) => {
                 if (e.key === 'Enter') {
                     e.stopImmediatePropagation(); // 防止 enter 让 dialog 直接 confirm 了
                 }
             }}
         >
             <div style={{ display: "flex", "flex-direction": 'column' }}>
-                <ItemWrap
+                <Form.Wrap
                     title={i18n_.name[0]}
                     description={i18n_.name[1]}
                 >
-                    <InputItem
+                    <Form.Input
                         key="name"
                         value="New Group"
                         type="textinput"
                         changed={(v) => {
                             props.setGroup({ name: v });
                         }}
                     />
-                </ItemWrap>
-                <ItemWrap
+                </Form.Wrap>
+                <Form.Wrap
                     title={i18n_.type[0]}
                     description={i18n_.type[1]}
                 >
-                    <InputItem
+                    <Form.Input
                         key="type"
                         value={groupType()}
                         type="select"
@@ -292,7 +292,7 @@ const NewGroup = (props: IPrpos) => {
                             }
                         }}
                     />
-                </ItemWrap>
+                </Form.Wrap>
             </div>
             <Transition
                 onExit={(el, done) => {

diff --git a/src/components/setting/index.tsx b/src/components/setting/index.tsx
@@ -1,5 +1,4 @@
-import SettingItemWrap from "@/libs/components/item-wrap";
-import InputItem from "@/libs/components/item-input";
+import { FormWrap as SettingItemWrap, FormInput as InputItem } from '@/libs/components/Form';
 import GroupList from './group-list';
 import { configs, setConfigs } from "@/model";
 
@@ -9,7 +8,7 @@ const App = () => {
     const i18n_ = i18n.setting;
 
     return (
-        <div class="config__tab-container fn__flex-1" style={{
+        <div class="fn__flex-1" style={{
             'font-size': '1rem',
             padding: '10px 20px'
         }}>

diff --git a/src/libs/components/item-input.tsx → src/libs/components/Form/form-input.tsx b/src/libs/components/item-input.tsx → src/libs/components/Form/form-input.tsx
@@ -1,11 +1,11 @@
-import { createMemo, For } from "solid-js";
+import { createMemo, For, JSX } from "solid-js";
 
 interface IProps extends ISettingItemCore {
-    changed: (v?: any) => void;
-    style?: { [key: string]: string | number };
+    changed?: (v?: any) => void;
+    style?: JSX.CSSProperties;
 }
 
-export default function InputItem(props: IProps) {
+export default function FormInput(props: IProps) {
 
     const fn_size = true;
 
@@ -23,7 +23,7 @@ export default function InputItem(props: IProps) {
             styles = { resize: "vertical", height: '10rem', "white-space": "nowrap" };
         }
         let propstyle = props.style ?? {};
-        styles = { ...styles, ...propstyle };
+        styles = {...styles, ...propstyle};
         return {
             style: styles
         };
@@ -92,7 +92,7 @@ export default function InputItem(props: IProps) {
                     {...attrStyle()}
                     onClick={click}
                 >
-                    {props.button.label}
+                    {props.button?.label ?? props.value}
                 </button>
             );
         } else if (props.type === "select") {

diff --git a/src/libs/components/Form/form-wrap.module.css b/src/libs/components/Form/form-wrap.module.css
@@ -0,0 +1,16 @@
+/* item-wrap.module.css */
+
+.item-wrap {
+    box-shadow: unset;
+    padding-bottom: 16px;
+    /* margin-bottom: 16px; */
+}
+
+.item-wrap:not(:last-child) {
+    border-bottom: 1px solid var(--b3-border-color);
+}
+
+.title {
+    font-weight: bold;
+    color: var(--b3-theme-primary);
+}