@tnotesjs/core 0.1.20 → 0.1.22

package/vitepress/components/Layout/Layout.vue

@@ -76,12 +76,10 @@
 
         <!-- 操作按钮（仅开发环境且非首页显示） -->
         <template #footer v-if="isDev && !modalIsHomeReadme">
-          <div :class="$style.actionBar">
+          <div class="actionBar">
             <button
-              :class="[
-                $style.saveButton,
-                { [$style.disabled]: !hasConfigChanges },
-              ]"
+              class="saveButton"
+              :class="{ disabled: !hasConfigChanges }"
               @click="saveNoteConfig"
               :disabled="!hasConfigChanges || isSaving"
               type="button"
@@ -91,7 +89,7 @@
             <button
               v-if="hasConfigChanges"
               @click="resetNoteConfig"
-              :class="$style.resetButton"
+              class="resetButton"
               type="button"
             >
               重置
@@ -100,15 +98,15 @@
 
           <!-- 保存进度提示 -->
           <Transition name="toast">
-            <div v-if="isSaving && savingMessage" :class="$style.loadingToast">
-              <div :class="$style.loadingSpinner"></div>
+            <div v-if="isSaving && savingMessage" class="loadingToast">
+              <div class="loadingSpinner"></div>
               <span>{{ savingMessage }}</span>
             </div>
           </Transition>
 
           <!-- 保存成功提示 -->
           <Transition name="toast">
-            <div v-if="showSuccessToast" :class="$style.toast">✓ 保存成功</div>
+            <div v-if="showSuccessToast" class="toast">✓ 保存成功</div>
           </Transition>
         </template>
       </AboutModal>
@@ -618,4 +616,129 @@ watch(
 }
 </style>
 
-<style module src="./Layout.module.scss" scoped></style>
+<style scoped lang="scss">
+/* 操作栏样式 */
+.actionBar {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+/* 保存按钮样式 */
+.saveButton {
+  padding: 0.625rem 1.5rem;
+  background: linear-gradient(135deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(var(--vp-c-brand-rgb), 0.3);
+
+  &:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(var(--vp-c-brand-rgb), 0.4);
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+
+  &.disabled,
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+/* 重置按钮样式 */
+.resetButton {
+  padding: 0.625rem 1.5rem;
+  background: transparent;
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: var(--vp-c-text-1);
+    border-color: var(--vp-c-brand-1);
+    background: var(--vp-c-bg-soft);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+/* Toast 提示样式 */
+.toast {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--vp-c-brand-1);
+  color: white;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+}
+
+/* Loading Toast 样式 */
+.loadingToast {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* Loading 旋转动画 */
+.loadingSpinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--vp-c-divider);
+  border-top-color: var(--vp-c-brand-1);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Toast 过渡动画 */
+:global(.toast-enter-active),
+:global(.toast-leave-active) {
+  transition: all 0.3s ease;
+}
+
+:global(.toast-enter-from),
+:global(.toast-leave-to) {
+  opacity: 0;
+  transform: translateY(20px);
+}
+</style>

package/vitepress/components/Layout/NavBarSettingsTrigger.vue

@@ -3,14 +3,12 @@
     type="button"
     class="tnotes-nav-settings-trigger"
     title="打开设置"
-    aria-label="打开设置"
     @click="open"
   >
     <img
       :src="icon__setting"
       class="tnotes-nav-settings-icon"
       alt=""
-      aria-hidden="true"
     />
   </button>
 </template>

package/vitepress/components/Layout/SidebarNavBefore.vue

@@ -17,7 +17,6 @@
             { 'is-active': isCatalogActive },
           ]"
           :href="catalogLink"
-          :aria-current="isCatalogActive ? 'page' : undefined"
         >
           目录
         </a>

package/vitepress/components/Layout/SidebarResizeHandle.vue

@@ -10,26 +10,18 @@
     <div
       v-if="!hidden"
       class="resize-hotspot"
-      :aria-label="`拖动调整侧边栏宽度，当前 ${width}px`"
-      role="separator"
-      aria-orientation="vertical"
-      :aria-valuemin="minWidth"
-      :aria-valuemax="maxWidth"
-      :aria-valuenow="width"
       @mousedown.prevent="startResize"
     ></div>
 
-    <div v-if="!hidden" class="resize-indicator" aria-hidden="true"></div>
+    <div v-if="!hidden" class="resize-indicator"></div>
 
     <button
       class="sidebar-edge-toggle"
       type="button"
-      :aria-label="toggleTitle"
-      :aria-pressed="hidden"
       @click.stop="toggleSidebar"
     >
       <img :src="toggleIcon" alt="" />
-      <span class="sidebar-edge-tooltip" role="tooltip">
+      <span class="sidebar-edge-tooltip">
         <span>{{ toggleActionText }}</span>
         <kbd>{{ shortcutText }}</kbd>
       </span>

package/vitepress/components/Layout/ToggleFullContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <img @click="toggle" :class="$style.contentToggleBtn" :aria-pressed="full" :title="full ? '退出全屏内容区' : '全屏显示内容区'" :src="full ? icon__fullscreen_exit : icon__fullscreen" alt="" />
+  <img @click="toggle" class="contentToggleBtn" :title="full ? '退出全屏内容区' : '全屏显示内容区'" :src="full ? icon__fullscreen_exit : icon__fullscreen" alt="" />
 </template>
 
 <script setup lang="ts">
@@ -32,4 +32,16 @@ function toggle() {
 }
 </script>
 
-<style module src="./ToggleFullContent.module.scss"></style>
+<style scoped lang="scss">
+.contentToggleBtn {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 3px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: var(--vp-c-bg-alt);
+  }
+}
+</style>

package/vitepress/components/Layout/ToggleSidebar.vue

@@ -2,8 +2,7 @@
 <template>
   <img
     @click="toggleSidebar"
-    :class="$style.sidebarToggleBtn"
-    :aria-pressed="hidden"
+    class="sidebarToggleBtn"
     :title="hidden ? '显示侧边栏' : '隐藏侧边栏'"
     :src="hidden ? icon__next : icon__prev"
     alt=""
@@ -23,4 +22,16 @@ onMounted(() => {
 })
 </script>
 
-<style module src="./ToggleSidebar.module.scss"></style>
+<style scoped lang="scss">
+.sidebarToggleBtn {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 3px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: var(--vp-c-bg-alt);
+  }
+}
+</style>

package/vitepress/components/LoadingPage/LoadingPage.vue

@@ -1,12 +1,7 @@
 <template>
   <ClientOnly>
     <Teleport to="body">
-      <div
-        v-if="visible"
-        class="tnotes-loading-overlay"
-        role="alert"
-        aria-live="polite"
-      >
+      <div v-if="visible" class="tnotes-loading-overlay">
         <div class="loading-container">
           <div class="spinner"></div>
           <h2>{{ message }}</h2>

package/vitepress/components/MarkMap/MarkMap.vue

@@ -178,7 +178,6 @@ function addUpdateButton(toolbar: HTMLElement) {
   // levelInput.style.background = 'var(--vp-c-bg)'
   levelInput.style.color = 'var(--vp-c-tip-1)'
   levelInput.title = '展开层级'
-  levelInput.setAttribute('aria-label', 'markmap-expand-level')
 
   // 保存引用，供外部（props 改变）同步输入值
   toolbarLevelInput = levelInput
@@ -394,7 +393,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div
-    :class="$style.markmapContainer"
+    class="markmapContainer"
     ref="containerRef"
     style="position: relative"
   >
@@ -402,4 +401,164 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-<style module src="./MarkMap.module.scss"></style>
+<style scoped lang="scss">
+/**
+ * MarkMap 组件样式
+ * 全局样式（.mm-toolbar, .mm-toolbar-item 等）已移至 global-components.css
+ */
+
+.markmapContainer {
+  border-radius: 8px;
+  padding: 1rem;
+  overflow: auto;
+  position: relative;
+  margin: 1.5rem 0;
+  transition: all 0.3s ease;
+  background-color: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+
+  &:hover {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  }
+
+  svg {
+    min-width: 100%;
+    display: block;
+    transition: height 0.3s ease;
+
+    text:empty {
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+  }
+
+  /* 鼠标悬停显示 toolbar */
+  &:hover :global(.mm-toolbar) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* dark background */
+:global(.markmap-dark) .markmapContainer {
+  background-color: #1d1d1d;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+
+  &:hover {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* 按钮组样式 */
+.btnGroup {
+  color: var(--vp-c-brand-1);
+
+  input {
+    display: inline-block;
+    width: 2rem;
+    text-align: center;
+    border: 1px solid var(--vp-c-divider);
+    border-radius: 4px;
+    padding: 2px 4px;
+    background: var(--vp-c-bg);
+    color: var(--vp-c-text-1);
+    transition: all 0.2s ease;
+
+    &:focus {
+      outline: none;
+      border-color: var(--vp-c-brand-1);
+      box-shadow: 0 0 0 2px rgba(var(--vp-c-brand-1), 0.1);
+    }
+
+    &:hover {
+      border-color: var(--vp-c-brand-2);
+    }
+  }
+
+  button {
+    outline: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background-color: #f0f0f0;
+    transition: all 0.2s ease;
+    font-weight: 500;
+
+    &:hover {
+      background-color: #e0e0e0;
+      transform: translateY(-1px);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+}
+
+:global(.markmap-dark) .btnGroup {
+  button {
+    background-color: #333;
+    color: #fff;
+
+    &:hover {
+      background-color: #444;
+    }
+  }
+
+  input {
+    background-color: #2a2a2a;
+    border-color: #444;
+    color: #fff;
+
+    &:focus {
+      border-color: var(--vp-c-brand-1);
+    }
+  }
+}
+
+/* 全屏样式 */
+.markmapContainer:fullscreen,
+.markmapContainer:-ms-fullscreen,
+.markmapContainer:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-shadow: none;
+}
+
+:global(.markmap-dark) .markmapContainer:fullscreen,
+:global(.markmap-dark) .markmapContainer:-ms-fullscreen,
+:global(.markmap-dark) .markmapContainer:-webkit-full-screen {
+  background: #1d1d1d;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .markmapContainer {
+    padding: 0.75rem;
+    margin: 1rem 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .markmapContainer {
+    padding: 0.5rem;
+    margin: 0.75rem 0;
+  }
+}
+
+/* 加载动画 */
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+</style>