feat: enhance studio app with left panel toggle and loading state

- Added a left panel toggle button in the header to show/hide the ViewList component. - Integrated loading state management in the studio store for better user feedback during data fetching. - Updated the ViewList component to utilize a dropdown menu for editing and deleting views. - Improved UI elements with consistent border styles and loading indicators. - Refactored the DataItemForm and ViewFormItem components for better user experience and added clipboard copy functionality. - Introduced a new DropdownMenu component for better dropdown handling across the application.
2026-01-01 23:56:56 +08:00
parent 231caa3b9a
commit d8acdaf97d
9 changed files with 786 additions and 174 deletions
--- a/web/package.json
+++ b/web/package.json
@@ -30,6 +30,7 @@
    "@kevisual/registry": "^0.0.1",
    "@kevisual/router": "^0.0.52",
    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-label": "^2.1.8",
    "@radix-ui/react-slot": "^1.2.4",
    "@tailwindcss/vite": "^4.1.18",
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
      '@radix-ui/react-checkbox':
        specifier: ^1.3.3
        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.16
+        version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
      '@radix-ui/react-label':
        specifier: ^2.1.8
        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -560,6 +563,21 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/react-dom@2.1.6':
+    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
  '@handsontable/pikaday@1.0.0':
    resolution: {integrity: sha512-1VN6N38t5/DcjJ7y7XUYrDx1LuzvvzlrFdBdMG90Qo1xc8+LXHqbWbsTEm5Ec5gXTEbDEO53vUT35R+2COmOyg==}

@@ -790,6 +808,19 @@ packages:
  '@radix-ui/primitive@1.1.3':
    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}

+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-checkbox@1.3.3':
    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
    peerDependencies:
@@ -803,6 +834,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-compose-refs@1.1.2':
    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
    peerDependencies:
@@ -834,6 +878,15 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
  '@radix-ui/react-dismissable-layer@1.1.11':
    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
    peerDependencies:
@@ -847,6 +900,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-dropdown-menu@2.1.16':
+    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-focus-guards@1.1.3':
    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
    peerDependencies:
@@ -891,6 +957,32 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-menu@2.1.16':
+    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-portal@1.1.9':
    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
    peerDependencies:
@@ -943,6 +1035,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-slot@1.2.3':
    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
    peerDependencies:
@@ -1015,6 +1120,15 @@ packages:
      '@types/react':
        optional: true

+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
  '@radix-ui/react-use-size@1.1.1':
    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
    peerDependencies:
@@ -1024,6 +1138,9 @@ packages:
      '@types/react':
        optional: true

+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
  '@rc-component/async-validator@5.0.4':
    resolution: {integrity: sha512-qgGdcVIF604M9EqjNF0hbUTz42bz/RDtxWdWuU5EQe3hi7M8ob54B6B35rOsvX5eSvIHIzT9iH1R3n+hk3CGfg==}
    engines: {node: '>=14.x'}
@@ -4160,6 +4277,23 @@ snapshots:
  '@esbuild/win32-x64@0.25.10':
    optional: true

+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@floating-ui/utils@0.2.10': {}
+
  '@handsontable/pikaday@1.0.0': {}

  '@img/colour@1.0.0':
@@ -4461,6 +4595,15 @@ snapshots:

  '@radix-ui/primitive@1.1.3': {}

+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
@@ -4477,6 +4620,18 @@ snapshots:
      '@types/react': 19.2.7
      '@types/react-dom': 19.2.3(@types/react@19.2.7)

+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.2.3)':
    dependencies:
      react: 19.2.3
@@ -4511,6 +4666,12 @@ snapshots:
      '@types/react': 19.2.7
      '@types/react-dom': 19.2.3(@types/react@19.2.7)

+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
    dependencies:
      '@radix-ui/primitive': 1.1.3
@@ -4524,6 +4685,21 @@ snapshots:
      '@types/react': 19.2.7
      '@types/react-dom': 19.2.3(@types/react@19.2.7)

+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.7)(react@19.2.3)':
    dependencies:
      react: 19.2.3
@@ -4557,6 +4733,50 @@ snapshots:
      '@types/react': 19.2.7
      '@types/react-dom': 19.2.3(@types/react@19.2.7)

+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
    dependencies:
      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -4595,6 +4815,23 @@ snapshots:
      '@types/react': 19.2.7
      '@types/react-dom': 19.2.3(@types/react@19.2.7)

+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
  '@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.2.3)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
@@ -4649,6 +4886,13 @@ snapshots:
    optionalDependencies:
      '@types/react': 19.2.7

+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.7)(react@19.2.3)':
    dependencies:
      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
@@ -4656,6 +4900,8 @@ snapshots:
    optionalDependencies:
      '@types/react': 19.2.7

+  '@radix-ui/rect@1.1.1': {}
+
  '@rc-component/async-validator@5.0.4':
    dependencies:
      '@babel/runtime': 7.28.4
--- a/web/src/apps/studio/index.tsx
+++ b/web/src/apps/studio/index.tsx
@@ -1,17 +1,24 @@
 import { toast, ToastContainer } from 'react-toastify';
 import { useStudioStore } from './store.ts';
 import { useEffect, useState } from 'react';
-import { MonitorPlay, Play } from 'lucide-react';
+import { MonitorPlay, Play, PanelLeft, PanelLeftClose } from 'lucide-react';
 import { Panel, Group } from 'react-resizable-panels'
 import { ViewList } from '../view/list.tsx';
+import { useShallow } from 'zustand/shallow';
+
 export const AppProvider = () => {
+  const { showLeftPanel } = useStudioStore(useShallow((state) => ({
+    showLeftPanel: state.showLeftPanel,
+  })));
  return <main className='w-full h-screen flex flex-col overflow-hidden'>
    <Group className="h-full flex-1 overflow-hidden">
-      <Panel defaultSize={300} minSize={250} maxSize={500} className="border-r overflow-auto">
+      {showLeftPanel && <Panel defaultSize={300} minSize={250} maxSize={500} className="border-r border-gray-300 overflow-auto">
        <ViewList />
-      </Panel>
+      </Panel>}
      <Panel>
-        <App />
+        <WrapperHeader>
+          <App />
+        </WrapperHeader>
      </Panel>
    </Group>
    <ToastContainer
@@ -27,7 +34,22 @@ export const AppProvider = () => {
      theme="light" />
  </main>
 }
-
+export const WrapperHeader = (props: { children: React.ReactNode }) => {
+  const showLeftPanel = useStudioStore(state => state.showLeftPanel);
+  const setShowLeftPanel = useStudioStore(state => state.setShowLeftPanel);
+  return <div className='h-full'>
+    <div className="w-full h-12 flex items-center justify-between px-4 border-b border-gray-200 bg-white">
+      <div className="cursor-pointer text-gray-600 hover:text-gray-900 transition-colors" title="Kevisual Router Studio" onClick={() => {
+        setShowLeftPanel(!showLeftPanel);
+      }}>
+        {showLeftPanel ? <PanelLeftClose size={16} /> : <PanelLeft size={16} />}
+      </div>
+    </div>
+    <div style={{ height: 'calc(100% - 3rem)' }} className="overflow-auto">
+      {props.children}
+    </div>
+  </div >
+}
 interface RouteItem {
  id: string;
  path?: string;
@@ -37,7 +59,7 @@ interface RouteItem {
 }

 export const App = () => {
-  const { routes, getRouteList, run } = useStudioStore();
+  const { routes, getRouteList, run, loading } = useStudioStore();
  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
  const [visibleIds, setVisibleIds] = useState<Set<string>>(new Set());

@@ -68,7 +90,8 @@ export const App = () => {

  return (
    <div className="max-w-5xl mx-auto p-6 h-full overflow-auto">
-      <div className="space-y-1">
+      {loading && <div className="text-center text-gray-500 mb-4">加载中...</div>}
+      <div className={`space-y-1 ${loading ? "opacity-50 pointer-events-none" : ""}`}>
        {routes.map((route: RouteItem) => {
          const isExpanded = expandedIds.has(route.id);
          const isIdVisible = visibleIds.has(route.id);
@@ -77,7 +100,7 @@ export const App = () => {
          return (
            <div
              key={route.id}
-              className="px-4 py-3 border-b border-gray-100 hover:bg-gray-50/50 transition-all duration-200"
+              className="px-4 py-3 border-b border-gray-100 hover:bg-gray-50/50 transition-all duration-200 animate-in fade-in slide-in-from-top-1 duration-400"
            >
              <div className="flex flex-col gap-2.5">
                {/* ID and Path/Key in one line */}
@@ -120,7 +143,7 @@ export const App = () => {
                    className="cursor-pointer group"
                  >
                    <div
-                      className={`text-gray-700 transition-colors duration-200 cursor-pointer ${isExpanded ? 'text-gray-900' : 'group-hover:text-gray-900'
+                      className={`text-gray-700 transition-colors duration-200 cursor-pointer overflow-hidden ${isExpanded ? 'text-gray-900 animate-expand-in' : 'group-hover:text-gray-900 max-h-0 opacity-0'
                        }`}
                    >
                      {isExpanded ? (
--- a/web/src/apps/studio/store.ts
+++ b/web/src/apps/studio/store.ts
@@ -4,7 +4,13 @@ import { query } from '@/modules/query.ts'
 import { toast } from 'react-toastify';
 import { use } from '@kevisual/context'
 import { MyCache } from '@kevisual/cache'
+import { persist } from 'zustand/middleware';

+const historyReplace = (url: string) => {
+  if (window.history.replaceState) {
+    window.history.replaceState(null, '', url);
+  }
+}
 type RouteItem = {
  id: string;
  path?: string;
@@ -16,8 +22,10 @@ type RouteItem = {
 type RouteViewList = Array<RouterViewData>;

 interface StudioState {
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
  routes: Array<RouteItem>;
-  getRouteList: () => Promise<void>;
+  getRouteList: (viewId?: string) => Promise<void>;
  run: (route: RouteItem) => Promise<void>;
  queryProxy?: QueryProxy;
  init: (force?: boolean) => Promise<{ queryProxy: QueryProxy }>;
@@ -27,105 +35,144 @@ interface StudioState {
  updateRouteView: (view: RouterViewData) => Promise<void>;
  deleteRouteView: (id: string) => Promise<void>;
  currentView?: RouterViewData;
+  setCurrentView: (view?: RouterViewData) => Promise<void>;
+  showLeftPanel: boolean;
+  setShowLeftPanel: (show: boolean) => void;
 }
 const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
-export const useStudioStore = create<StudioState>((set, get) => ({
-  routes: [],
-  getRouteList: async () => {
-    await get().getCurrentView();
-    const state = await get().init();

-    let queryProxy = state.queryProxy;
-    const url = new URL(window.location.href);
-    const viewId = url.searchParams.get('viewId') || 'default';
-    const routes: any[] = await queryProxy.listRoutes(() => true, { viewId });
-    set({ routes });
-    get().getViewList();
-  },
-  getViewList: async () => {
-    const res = await query.post({ path: 'views', key: 'list' });
-    if (res.code === 200) {
-      const list = res.data.list as RouteViewList || [];
-      set({ routeViewList: list });
-    }
-  },
-  getCurrentView: async () => {
-    const url = new URL(window.location.href);
-    const viewId = url.searchParams.get('viewId');
-    if (!viewId) {
-      return;
-    }
-    const res = await query.post({ path: 'views', key: 'current', data: { viewId: viewId } });
-    if (res.code === 200) {
-      const view = res.data as RouterViewData;
-      set({ currentView: view });
-    } else {
-      set({ currentView: undefined });
-    }
-  },
-  routeViewList: [],
-  updateRouteView: async (view: RouterViewData) => {
-    const res = await query.post({ path: 'views', key: 'update', data: view });
-    if (res.code !== 200) {
-      toast.error(`视图更新失败：${res.message || '未知错误'}`);
-      return;
-    } else {
-      get().getViewList();
-      toast.success('视图更新成功');
-    }
-  },
-  deleteRouteView: async (id: string) => {
-    const res = await query.post({ path: 'views', key: 'delete', data: { id } });
-    if (res.code !== 200) {
-      toast.error(`视图删除失败：${res.message || '未知错误'}`);
-      return;
-    }
-    get().getViewList();
-    toast.success('视图删除成功');
-  },
-  run: async (route: RouteItem) => {
-    const state = await get().init();
-    let queryProxy = state.queryProxy;
-    const res = await queryProxy.run({ path: route.path, key: route.key });
-    if (res.code !== 200) {
-      toast.error(`运行失败：${res.message || '未知错误'}`);
-    } else if (res.code === 200) {
-      //
-    }
-  },
-  queryProxy: undefined,
-  router: undefined,
-  init: async (force?: boolean) => {
-    // let _url = 'http://localhost:52002/api/router';
-    let _url = 'http://localhost:52000/api/router';
-    // let _url = '/api/router';
-    let queryProxy = get().queryProxy;
-    if (queryProxy && !force) {
-      return { queryProxy };
-    }
-    let currentView: RouterViewData | undefined = get().currentView;
-    console.log('currentView in init', currentView);
-    const routerViewData: RouterViewData = currentView || {
-      views: [{
-        id: 'default',
-        title: '默认视图',
-        query: `WHERE path = 'file' `
-      }],
-      data: {
-        items: []
+export const useStudioStore = create<StudioState>()(
+  persist(
+    (set, get) => ({
+      loading: false,
+      setLoading: (loading: boolean) => set({ loading }),
+      routes: [],
+      getRouteList: async () => {
+        await get().getCurrentView();
+        const state = await get().init();
+        let currentView: RouterViewData | undefined = get().currentView;
+        let queryProxy = state.queryProxy;
+        const viewId = currentView?.viewId ?? ''
+        const routes: any[] = await queryProxy.listRoutes(() => true, { viewId });
+        set({ routes });
      },
-      viewId: 'default',
+      setCurrentView: async (view?: RouterViewData) => {
+        const beforeView = get().currentView;
+        set({ currentView: view, routes: [] });
+        const viewId = view?.viewId || '';
+        const url = new URL(window.location.href);
+        if (viewId) {
+          url.searchParams.set('viewId', viewId);
+        } else {
+          url.searchParams.delete('viewId');
+        }
+        historyReplace(url.toString());
+        await get().init(beforeView?.id !== view?.id);
+        await get().getRouteList();
+      },
+      getViewList: async () => {
+        const res = await query.post({ path: 'views', key: 'list' });
+        if (res.code === 200) {
+          const list = res.data.list as RouteViewList || [];
+          set({ routeViewList: list });
+        }
+      },
+      getCurrentView: async () => {
+        const url = new URL(window.location.href);
+        const viewId = url.searchParams.get('viewId');
+        if (!viewId) {
+          return;
+        }
+        const res = await query.post({ path: 'views', key: 'current', data: { viewId: viewId } });
+        if (res.code === 200) {
+          const view = res.data as RouterViewData;
+          view.viewId = viewId;
+          set({ currentView: view });
+        } else {
+          set({ currentView: undefined });
+        }
+      },
+      routeViewList: [],
+      updateRouteView: async (view: RouterViewData) => {
+        const res = await query.post({ path: 'views', key: 'update', data: view });
+        if (res.code !== 200) {
+          toast.error(`视图更新失败：${res.message || '未知错误'}`);
+          return;
+        } else {
+          get().getViewList();
+          toast.success('视图更新成功');
+        }
+      },
+      deleteRouteView: async (id: string) => {
+        const res = await query.post({ path: 'views', key: 'delete', data: { id } });
+        if (res.code !== 200) {
+          toast.error(`视图删除失败：${res.message || '未知错误'}`);
+          return;
+        }
+        get().getViewList();
+        toast.success('视图删除成功');
+      },
+      run: async (route: RouteItem) => {
+        const state = await get().init();
+        let queryProxy = state.queryProxy;
+        const res = await queryProxy.run({ path: route.path, key: route.key });
+        if (res.code !== 200) {
+          toast.error(`运行失败：${res.message || '未知错误'}`);
+        } else if (res.code === 200) {
+          //
+        }
+      },
+      queryProxy: undefined,
+      router: undefined,
+      init: async (force?: boolean) => {
+        // let _url = 'http://localhost:52002/api/router';  // Github starred
+        // let _url = 'http://localhost:52000/api/router'; // 浏览器
+        // let _url = '/api/router';
+        let queryProxy = get().queryProxy;
+        if (queryProxy && !force) {
+          return { queryProxy };
+        }
+        let currentView: RouterViewData | undefined = get().currentView;
+        const routerViewData: RouterViewData = currentView || {
+          views: [{
+            id: '',
+            title: '默认视图',
+            query: ``
+          }],
+          data: {
+            items: [
+              {
+                title: '默认路由',
+                id: '',
+                description: '',
+                type: 'api',
+                api: {
+                  url: '/api/router'
+                }
+              }
+            ]
+          },
+          viewId: '',
+        }
+        queryProxy = new QueryProxy({
+          routerViewData
+        });
+        set({ loading: true });
+        await queryProxy.init();
+        await sleep(500);
+        set({ loading: false });
+        set({ queryProxy });
+        return { queryProxy }
+      },
+      showLeftPanel: false,
+      setShowLeftPanel: (show: boolean) => set({ showLeftPanel: show }),
+    }),
+    {
+      name: 'studio-storage',
+      partialize: (state) => ({ showLeftPanel: state.showLeftPanel }),
    }
-    console.log('initializing query proxy with view', routerViewData);
-    queryProxy = new QueryProxy({
-      routerViewData
-    });
-    await queryProxy.init();
-    await sleep(500);
-    set({ queryProxy });
-    return { queryProxy }
-  },
-}));
+  )
+);

 use('studioStore', () => {
  return useStudioStore.getState();
--- a/web/src/apps/view/components/DataItemForm.tsx
+++ b/web/src/apps/view/components/DataItemForm.tsx
@@ -95,7 +95,7 @@ export const DataItemForm = ({ item, onChange, onRemove }: DataItemFormProps) =>
  }

  return (
-    <div className="border rounded-lg p-4 mb-4 space-y-4">
+    <div className="border border-gray-300 rounded-lg p-4 mb-4 space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="font-medium">数据项配置</h3>
        <button
--- a/web/src/apps/view/components/ViewEditor.tsx
+++ b/web/src/apps/view/components/ViewEditor.tsx
@@ -81,7 +81,7 @@ export const ViewEditor = ({ open, onOpenChange, data, onSave }: ViewEditorProps

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className="">
        <DialogHeader>
          <DialogTitle>{isUpdate ? '编辑视图' : '新增视图'}</DialogTitle>
        </DialogHeader>
--- a/web/src/apps/view/components/ViewFormItem.tsx
+++ b/web/src/apps/view/components/ViewFormItem.tsx
@@ -1,5 +1,6 @@
 import { Label } from "@/components/ui/label"
 import { Input } from "@/components/ui/input"
+import { toast } from "react-toastify"

 interface ViewFormProps {
  view: any
@@ -11,9 +12,16 @@ export const ViewFormItem = ({ view, onChange, onRemove }: ViewFormProps) => {
  const handleChange = (field: string, value: any) => {
    onChange({ ...view, [field]: value })
  }
-
+  const handleCopyId = async (id: string) => {
+    try {
+      await navigator.clipboard.writeText(id);
+      toast.success('已复制到剪贴板', { autoClose: 1000 });
+    } catch (err) {
+      console.error('复制失败', err);
+    }
+  }
  return (
-    <div className="border rounded-lg p-4 mb-4 space-y-4">
+    <div className="border border-gray-300 rounded-lg p-4 mb-4 space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="font-medium">视图配置</h3>
        <button
@@ -26,7 +34,7 @@ export const ViewFormItem = ({ view, onChange, onRemove }: ViewFormProps) => {
      </div>

      <div className="grid grid-cols-2 gap-4">
-        <div className="space-y-2">
+        <div className="space-y-2" onClick={() => handleCopyId(view.id)}>
          <Label>ID</Label>
          <Input
            value={view.id || ''}
--- a/web/src/apps/view/list.tsx
+++ b/web/src/apps/view/list.tsx
@@ -1,21 +1,81 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useStudioStore } from '../studio/store.ts';
 import { Search, RotateCw, Plus, MoreHorizontal, Layout, Edit2, Trash2 } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { ViewEditor } from "@/apps/view/components/ViewEditor.tsx";
+import { toast } from "react-toastify";

+const ViewItem = ({ view, onEdit, onDelete }: { view: any; onEdit: (view: any) => void; onDelete: (id: string) => void }) => {
+  const [expanded, setExpanded] = useState(false);
+  const studioStore = useStudioStore();
+  useEffect(() => {
+    const currentViewId = studioStore.currentView?.viewId;
+    if (view.views.some((v: any) => v.id === currentViewId)) {
+      setExpanded(true);
+    }
+  }, [studioStore.currentView?.viewId]);
+  const ShowViews = (props: { views: { id: string, title: string }[] }) => {
+    const studioStore = useStudioStore();
+    const currentViewId = studioStore.currentView?.viewId;
+    const isActiveView = (viewId: string) => {
+      return viewId === currentViewId;
+    }
+    return <div className="mt-2 ml-4 w-full border-l-2 border-l-gray-300 border-gray-300 pl-3 space-y-1">
+      {props.views.map(v => (
+        <div key={v.id} className={`text-sm px-2 py-1 rounded cursor-pointer transition-colors ${isActiveView(v.id) ? 'text-black bg-gray-100' : 'text-gray-600 hover:text-black hover:bg-gray-100'}`} onClick={(e) => {
+          studioStore.setCurrentView({ ...view, viewId: v.id })
+        }}>
+          {v.title || '未命名视图'}
+        </div>
+      ))}
+    </div>
+  }
+  return <div
+    key={view.id}
+    className="flex flex-col items-center py-3 px-4 border-b border-gray-200 last:border-b-0 hover:bg-gray-50 transition-colors"
+  >
+    <div className="w-full flex justify-between" onClick={() => setExpanded(!expanded)}>
+      <div className="flex items-center cursor-pointer"  >
+        <Layout className="h-4 w-4 mr-2 text-gray-500" />
+        {view.title || '未命名视图'}
+      </div>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="border-gray-300">
+          <DropdownMenuItem className="cursor-pointer" onClick={() => onEdit(view)}>
+            <Edit2 className="h-4 w-4 mr-2" />
+            编辑
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => onDelete(view.id)}
+            className="cursor-pointer text-red-600 focus:text-red-600"
+          >
+            <Trash2 className="h-4 w-4 mr-2" />
+            删除
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+
+    {expanded &&
+      <ShowViews views={view.views} />
+    }
+  </div>
+}
 export const ViewList = () => {
-  const { routeViewList, updateRouteView, deleteRouteView } = useStudioStore();
-  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+  const { routeViewList, updateRouteView, deleteRouteView, getViewList } = useStudioStore();
  const [searchTerm, setSearchTerm] = useState("");
  const [editorOpen, setEditorOpen] = useState(false);
  const [editingView, setEditingView] = useState<any>(null);
@@ -24,10 +84,14 @@ export const ViewList = () => {
    (view.title || '未命名视图').toLowerCase().includes(searchTerm.toLowerCase()) ||
    (view.description || '').toLowerCase().includes(searchTerm.toLowerCase())
  );
+  useEffect(() => {
+    getViewList();
+  }, [])

-
-  const handleRefresh = () => {
-    // 刷新逻辑
+  const handleRefresh = async () => {
+    const toastId = toast.loading('正在刷新视图列表...');
+    await getViewList();
+    toast.update(toastId, { render: '视图列表已刷新', type: 'success', isLoading: false, autoClose: 1000 });
  };

  const handleAdd = () => {
@@ -50,7 +114,7 @@ export const ViewList = () => {
  };

  return (
-    <div className="w-full h-full max-w-4xl p-4 border rounded-md shadow-sm">
+    <div className="w-full h-full max-w-4xl p-4 border border-gray-200 rounded-md shadow-sm">
      <div className="flex items-center space-x-2 mb-4">
        <div className="relative flex-1">
          <Input
@@ -61,62 +125,30 @@ export const ViewList = () => {
          />
          <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
        </div>
-        <Button variant="outline" size="icon" className="h-10 w-10" onClick={handleRefresh}>
+        <Button variant="outline" size="icon" className="h-10 w-10 cursor-pointer border-gray-300" onClick={handleRefresh}>
          <RotateCw className="h-4 w-4" />
        </Button>
-        <Button variant="outline" size="icon" className="h-10 w-10" onClick={handleAdd}>
+        <Button variant="outline" size="icon" className="h-10 w-10 cursor-pointer border-gray-300" onClick={handleAdd}>
          <Plus className="h-4 w-4" />
        </Button>
      </div>

-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead className="font-medium">视图名称</TableHead>
-            <TableHead className="w-10"></TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {filteredViews.length === 0 ? (
-            <TableRow>
-              <TableCell colSpan={4} className="text-center py-4 text-gray-500">
-                {searchTerm ? '未找到匹配的视图' : '暂无视图'}
-              </TableCell>
-            </TableRow>
-          ) : (
-            filteredViews.map((view) => (
-              <TableRow key={view.id} className={selectedItems.includes(view.id) ? "bg-gray-100" : ""}>
-                <TableCell className="font-medium">
-                  <div className="flex items-center">
-                    <Layout className="h-4 w-4 mr-2 text-gray-500" />
-                    {view.title || '未命名视图'}
-                  </div>
-                </TableCell>
-                <TableCell>
-                  <div className="flex items-center space-x-1">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8"
-                      onClick={() => handleEdit(view)}
-                    >
-                      <Edit2 className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8 text-red-500 hover:text-red-700"
-                      onClick={() => handleDelete(view.id)}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))
-          )}
-        </TableBody>
-      </Table>
+      <div className="flex flex-col">
+        {filteredViews.length === 0 ? (
+          <div className="text-center py-4 text-gray-500">
+            {searchTerm ? '未找到匹配的视图' : '暂无视图'}
+          </div>
+        ) : (
+          filteredViews.map((view) => (
+            <ViewItem
+              key={view.id}
+              view={view}
+              onEdit={handleEdit}
+              onDelete={handleDelete}
+            />
+          ))
+        )}
+      </div>

      <ViewEditor
        open={editorOpen}
--- a/web/src/components/ui/dropdown-menu.tsx
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}