feat: implement task management store with IPC integration

- Added a new task store in `src-react/stores/task.ts` to manage tasks and their statuses.
- Implemented functions for creating, executing, and retrying tasks, along with handling task progress and completion.
- Introduced persistence for tasks using IPC.
- Created utility functions for normalizing room types and building subtasks.
- Added a new CSS file for global styles in `src-react/styles.css`.
- Created runtime types in `src-react/types/runtime.ts` and exported them.
- Updated the main entry points for Vue and React applications to support dynamic framework loading.
- Refactored chat model interfaces and utility functions into `src/shared/chat-model.ts`.
- Updated TypeScript configuration to include paths for React components and types.
- Enhanced Vite configuration to support both Vue and React frameworks.

src-react/components/layout/Sidebar.tsx

@@ -0,0 +1,67 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+import { NAV_ITEMS, normalizeWorkspacePath } from '../../router/routes';
+
+const MENU_MARKS: Record<string, string> = {
+  '/home': '首',
+  '/knowledge': '知',
+  '/agents': '模',
+  '/skills': '技',
+  '/cron': '时',
+  '/scripts': '脚',
+  '/setting': '设',
+};
+
+export default function Sidebar() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const currentId = normalizeWorkspacePath(location.pathname);
+
+  return (
+    <aside className="w-[80px] h-full box-border flex flex-col items-center pb-[8px]">
+      <div className="flex flex-col gap-[16px] w-full">
+        {NAV_ITEMS.map((item) => {
+          const active = currentId === item.path;
+          const isSetting = item.path === '/setting';
+
+          return (
+            <div
+              key={item.path}
+              className={['flex flex-col gap-[16px]', isSetting ? 'mt-auto mb-[8px] shrink-1' : ''].join(' ')}
+            >
+              <button
+                type="button"
+                className="cursor-pointer flex flex-col items-center justify-center"
+                onClick={() => navigate(item.path)}
+              >
+                <div
+                  className={[
+                    'box-border rounded-[16px] w-[48px] h-[48px] flex flex-col items-center justify-center hover:bg-white dark:hover:bg-[#222225]',
+                    active ? 'bg-white dark:bg-[#222225]' : '',
+                  ].join(' ')}
+                >
+                  <span
+                    className="text-[18px] font-semibold leading-none"
+                    style={{ color: active ? '#2B7FFF' : '#525866' }}
+                  >
+                    {MENU_MARKS[item.path]}
+                  </span>
+                </div>
+
+                <div
+                  className="text-[14px] mt-[4px] mb-[8px] hover:text-[#2B7FFF]"
+                  style={{ color: active ? '#2B7FFF' : '#525866' }}
+                >
+                  {item.label}
+                </div>
+              </button>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="w-[48px] h-[48px] rounded-full overflow-hidden mt-auto bg-white dark:bg-[#222225] flex items-center justify-center border border-black/10 dark:border-[#2a2a2d]">
+        <span className="text-[16px] font-bold text-[#2B7FFF]">Z</span>
+      </div>
+    </aside>
+  );
+}