我的待办

src/views/index.vue

@@ -359,21 +359,21 @@
           </section>
 
           <section
-            class="side-card side-card--notice rounded-md p-2"
+            class="side-card side-card--notice side-card--todo-panel rounded-md p-2"
             :style="{ minHeight: '190px' }"
           >
             <div class="side-card__header w-[91%] ml-[15px]">
               <div class="notice-badge px-2 pb-2">{{ todoPanelTitle }}</div>
               <button
                 type="button"
-                class="side-card__more"
+                class="side-card__more side-card__more--todo-panel"
                 @click="router.push('/todo-list')"
               >
                 {{ $t("common.all") }}
-                <Icon icon="mingcute:right-line" class="text-[18px]" />
+                <span class="side-card__more-arrows">&gt;&gt;&gt;</span>
               </button>
             </div>
-            <div class="space-y-2 p-4 pt-2">
+            <div class="space-y-2 pt-2">
               <div
                 v-if="!userStore.getUser.username"
                 class="flex h-full items-center justify-center"
@@ -2149,6 +2149,266 @@ onUnmounted(() => {
   padding-top: 10px;
 }
 
+.side-card--todo-panel {
+  min-height: 410px !important;
+  padding: 18px 38px 26px !important;
+  border: 0;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 14px 32px rgba(72, 126, 190, 0.1);
+}
+
+.side-card--todo-panel .side-card__header {
+  width: 100% !important;
+  min-height: 34px;
+  margin-left: 0 !important;
+  padding: 0;
+  border-bottom: 2px solid #b8ccef;
+}
+
+.side-card--todo-panel .notice-badge {
+  justify-content: flex-start;
+  height: 34px;
+  min-width: 76px;
+  padding: 0 !important;
+  color: #0c5aee;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.side-card--todo-panel .side-card__more--todo-panel {
+  gap: 6px;
+  color: #0c5aee;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.side-card--todo-panel > .space-y-2 {
+  padding: 30px 0 0 !important;
+}
+
+.side-card--todo-panel .todo-item {
+  min-height: 74px;
+  padding: 16px 16px 16px 18px;
+  border: 1px solid #a9c8f8;
+  border-left: 0;
+  border-radius: 14px;
+  background: linear-gradient(90deg, #edf6ff 0%, #ffffff 100%);
+  box-shadow: none;
+}
+
+.side-card--todo-panel .todo-item + .todo-item {
+  margin-top: 14px;
+}
+
+.side-card--todo-panel .todo-item:hover {
+  background: linear-gradient(90deg, #e5f2ff 0%, #ffffff 100%);
+  border-color: #8db8f7;
+  box-shadow: none;
+  transform: none;
+}
+
+.side-card--todo-panel .todo-item .truncate {
+  color: #155fc2;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.side-card--todo-panel .todo-item .text-\[\#8a9ab0\] {
+  color: #4f6f96 !important;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.side-card--todo-panel .todo-item__tag {
+  min-width: 56px;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 4px 8px;
+  background: linear-gradient(90deg, #5aa7ff 0%, #0c5aee 100%) !important;
+  color: #ffffff !important;
+  font-size: 12px !important;
+  font-weight: 500;
+}
+
+.side-card--todo-panel .quick-todo-bar {
+  width: fit-content;
+  gap: 28px;
+  margin-top: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.side-card--todo-panel .quick-todo-btn {
+  min-width: 154px;
+  height: 26px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  border-radius: 999px;
+  background: #eef6ff;
+}
+
+.side-card--todo-panel .quick-todo-btn--center {
+  align-items: center;
+}
+
+.side-card--todo-panel .quick-todo-btn .number {
+  min-width: auto;
+  color: #e00024;
+  font-size: 22px;
+  line-height: 1;
+}
+
+.side-card--todo-panel .quick-todo-btn--center .number {
+  color: #00a650 !important;
+}
+
+.side-card--todo-panel .quick-todo-btn .aside-btn {
+  color: #4f6f96;
+  font-size: 13px !important;
+  font-weight: 800;
+}
+
+.side-card--todo-panel .quick-todo-btn .icon {
+  display: none;
+}
+
+:global([data-theme="dark"] .side-card--todo-panel) {
+  min-height: 190px !important;
+  padding: 8px !important;
+  border: 1px solid var(--portal-line);
+  border-radius: 14px;
+  background: linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
+  box-shadow:
+    var(--portal-shadow),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .side-card__header) {
+  width: 91% !important;
+  min-height: 20px;
+  margin-left: 15px !important;
+  padding-right: 10px;
+  border-bottom: 1px solid var(--portal-line);
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .notice-badge) {
+  justify-content: center;
+  height: 25px;
+  min-width: 70px;
+  padding: 0 8px 8px !important;
+  color: var(--portal-title);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+:global(
+  [data-theme="dark"] .side-card--todo-panel .side-card__more--todo-panel
+) {
+  color: var(--portal-subtitle);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+:global([data-theme="dark"] .side-card--todo-panel > .space-y-2) {
+  padding: 16px !important;
+  padding-top: 8px !important;
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .todo-item) {
+  min-height: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--portal-line);
+  border-radius: 8px;
+  background: var(--portal-card-4);
+  box-shadow: 0 10px 22px rgba(23, 52, 95, 0.08);
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .todo-item:hover) {
+  background: var(--portal-todo-hover);
+  transform: translateY(-1px);
+  border-color: rgba(109, 137, 213, 0.2);
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .todo-item .truncate) {
+  color: var(--portal-text);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+:global(
+  [data-theme="dark"] .side-card--todo-panel .todo-item .text-\[\#8a9ab0\]
+) {
+  color: #8a9ab0 !important;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .todo-item__tag) {
+  min-width: 0;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 400;
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .quick-todo-bar) {
+  display: flex;
+  width: auto;
+  gap: 16px;
+  margin-top: 0;
+  padding: 8px 16px;
+  border: 1px solid var(--portal-line);
+  border-radius: 8px;
+  background: var(--portal-todo-bg);
+  box-shadow: var(--portal-shadow);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .quick-todo-btn) {
+  min-width: 0;
+  height: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
+  border-radius: 0;
+  background: transparent;
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .quick-todo-btn--center) {
+  align-items: center;
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .quick-todo-btn .number) {
+  min-width: 24px;
+  color: var(--portal-number-todo);
+  font-size: 18px;
+}
+
+:global(
+  [data-theme="dark"] .side-card--todo-panel .quick-todo-btn--center .number
+) {
+  color: #2d8767 !important;
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .quick-todo-btn .aside-btn) {
+  color: var(--portal-text-soft);
+  font-size: 10px !important;
+  font-weight: 400;
+}
+
+:global([data-theme="dark"] .side-card--todo-panel .quick-todo-btn .icon) {
+  display: inline-flex;
+}
+
 .side-card__header {
   display: flex;
   align-items: center;