chore: 集成设计系统和完善范式相关组件

## 主要改进
- index.html：引入设计系统样式文件
- package.json：添加 playwright 依赖用于测试
- ParadigmSelectorModal.vue：添加"新建范式"按钮
- 其他组件：更新以支持自定义范式功能

## 技术改进
- 统一设计 token 和组件样式
- 完善范式选择和创建流程

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/GlobalSidebar.vue

@@ -1,56 +1,43 @@
 <template>
-  <aside class="w-16 h-screen flex flex-col items-center py-6 bg-slate-900 border-r border-slate-800 shrink-0 z-50">
+  <aside class="sidebar">
     <!-- Logo/Home -->
-    <div class="mb-8 text-2xl filter drop-shadow-[0_0_8px_rgba(59,130,246,0.5)]">
+    <div class="sidebar-logo">
       🚀
     </div>
 
     <!-- 导航项 -->
-    <nav class="flex-1 w-full flex flex-col items-center gap-4">
-      <button 
-        v-for="item in navItems" 
+    <nav class="sidebar-nav">
+      <button
+        v-for="item in navItems"
         :key="item.id"
         @click="switchPage(item.id)"
-        :class="[
-          'group relative w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300',
-          currentPage === item.id 
-            ? 'bg-blue-600 text-white shadow-[0_0_15px_rgba(37,99,235,0.4)]' 
-            : 'text-slate-500 hover:bg-slate-800 hover:text-slate-300'
-        ]"
+        :class="['nav-item', { active: currentPage === item.id }]"
         :title="item.label"
       >
-        <span class="text-xl">{{ item.icon }}</span>
-        
+        <span class="nav-icon">{{ item.icon }}</span>
+
         <!-- Tooltip -->
-        <div class="absolute left-full ml-3 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 shadow-xl border border-slate-700 pointer-events-none">
+        <div class="nav-tooltip">
           {{ item.label }}
-          <div class="absolute left-[-4px] top-1/2 -translate-y-1/2 w-2 h-2 bg-slate-800 border-l border-b border-slate-700 rotate-45"></div>
+          <div class="nav-tooltip-arrow"></div>
         </div>
 
         <!-- Active Indicator -->
-        <div 
-          v-if="currentPage === item.id"
-          class="absolute -left-0 w-1 h-6 bg-blue-400 rounded-r-full"
-        ></div>
+        <div v-if="currentPage === item.id" class="nav-indicator"></div>
       </button>
     </nav>
 
     <!-- 底部：设置 -->
-    <div class="mt-auto">
-      <button 
+    <div class="sidebar-footer">
+      <button
         @click="switchPage('settings')"
-        :class="[
-          'group relative w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300',
-          currentPage === 'settings' 
-            ? 'bg-slate-700 text-white' 
-            : 'text-slate-500 hover:bg-slate-800 hover:text-slate-300'
-        ]"
+        :class="['nav-item', { active: currentPage === 'settings' }]"
         title="设置"
       >
-        <span class="text-xl">⚙️</span>
-        <div class="absolute left-full ml-3 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 shadow-xl border border-slate-700 pointer-events-none">
+        <span class="nav-icon">⚙️</span>
+        <div class="nav-tooltip">
           设置
-          <div class="absolute left-[-4px] top-1/2 -translate-y-1/2 w-2 h-2 bg-slate-800 border-l border-b border-slate-700 rotate-45"></div>
+          <div class="nav-tooltip-arrow"></div>
         </div>
       </button>
     </div>
@@ -78,3 +65,120 @@ const switchPage = (page) => {
   appStore.setCurrentPage(page)
 }
 </script>
+
+<style scoped>
+/* 侧边栏容器 */
+.sidebar {
+  width: 64px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--space-6) 0;
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border-default);
+  flex-shrink: 0;
+  z-index: 50;
+}
+
+/* Logo */
+.sidebar-logo {
+  margin-bottom: var(--space-8);
+  font-size: var(--text-2xl);
+  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.5));
+}
+
+/* 导航区域 */
+.sidebar-nav {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+/* 导航项 */
+.nav-item {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  transition: all var(--transition-normal);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+
+.nav-item:hover {
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+}
+
+.nav-item.active {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+  box-shadow: 0 0 15px rgba(96, 165, 250, 0.4);
+}
+
+.nav-icon {
+  font-size: var(--text-xl);
+}
+
+/* Tooltip */
+.nav-tooltip {
+  position: absolute;
+  left: 100%;
+  margin-left: var(--space-3);
+  padding: var(--space-1) var(--space-2);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: var(--text-xs);
+  border-radius: var(--radius-md);
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+  z-index: 50;
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-default);
+  pointer-events: none;
+}
+
+.nav-item:hover .nav-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
+.nav-tooltip-arrow {
+  position: absolute;
+  left: -4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border-default);
+  border-bottom: 1px solid var(--border-default);
+  rotate: 45deg;
+}
+
+/* 激活指示器 */
+.nav-indicator {
+  position: absolute;
+  left: 0;
+  width: 4px;
+  height: 24px;
+  background: var(--accent-primary);
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+}
+
+/* 底部区域 */
+.sidebar-footer {
+  margin-top: auto;
+}
+</style>