✨ Feature(custom): optimize picbed config edit page

src/renderer/i18n/locales/en.json

@@ -585,6 +585,7 @@
       }
     },
     "picBedConfigs": {
+      "configSettings": "Configuration Settings",
       "copyAPI": "Copy Upload API",
       "copyAPIFailed": "Copy API Address Failed",
       "copyAPISucceed": "Copy API Address Succeed",
@@ -592,14 +593,15 @@
       "importConfigSuccess": "Import Config Success",
       "loadConfigFailed": "Load Config Failed, Please Check If Config File Is Correct",
       "loadPicBedListFailed": "Load PicBed List Failed",
-      "noConfigOptions": "No Config Options",
+      "noConfigOptions": "No Configuration Options",
+      "noConfigOptionsDesc": "This uploader does not have any configuration options available.",
       "noConfigs": "No Configs",
       "resetFailed": "Reset Failed, Please Check If Config Options Are Correct",
       "resetSuccess": "Reset Success",
+      "selectConfig": "Select Configuration",
       "setFailedInfo": "Set Failed, Please Check If Config Options Are Correct",
       "setSuccess": "Set Success",
-      "title": "Config",
+      "viewDoc": "Documentation",
-      "viewDoc": "View Document",
       "viewDocFailed": "View Document Failed"
     },
     "plugin": {

src/renderer/i18n/locales/zh-CN.json

@@ -585,6 +585,7 @@
       }
     },
     "picBedConfigs": {
+      "configSettings": "配置设置",
       "copyAPI": "复制上传API",
       "copyAPIFailed": "复制API地址失败",
       "copyAPISucceed": "复制API地址成功",
@@ -593,13 +594,14 @@
       "loadConfigFailed": "加载配置失败, 请检查配置文件是否正确",
       "loadPicBedListFailed": "加载图床列表失败",
       "noConfigOptions": "暂无配置项",
+      "noConfigOptionsDesc": "该上传器没有可用的配置选项。",
       "noConfigs": "配置为空",
       "resetFailed": "重置失败, 请检查配置项是否正确",
       "resetSuccess": "重置成功",
+      "selectConfig": "选择配置",
       "setFailedInfo": "设置失败, 请检查配置项是否正确",
       "setSuccess": "设置成功",
-      "title": "配置",
+      "viewDoc": "文档",
-      "viewDoc": "查看文档",
       "viewDocFailed": "查看文档失败"
     },
     "plugin": {

src/renderer/i18n/locales/zh-TW.json

@@ -585,6 +585,7 @@
       }
     },
     "picBedConfigs": {
+      "configSettings": "配置設定",
       "copyAPI": "複製上傳API",
       "copyAPIFailed": "複製 API 位址失敗",
       "copyAPISucceed": "複製 API 位址成功",
@@ -593,13 +594,14 @@
       "loadConfigFailed": "載入配置失敗，請檢查配置文件是否正確",
       "loadPicBedListFailed": "載入圖床列表失敗",
       "noConfigOptions": "暫無配置項",
+      "noConfigOptionsDesc": "該上傳器沒有可用的配置選項。",
       "noConfigs": "配置為空",
       "resetFailed": "重設失敗，請檢查配置項是否正確",
       "resetSuccess": "重設成功",
+      "selectConfig": "選擇配置",
       "setFailedInfo": "設定失敗，請檢查配置項是否正確",
       "setSuccess": "設定成功",
-      "title": "配置",
+      "viewDoc": "文檔",
-      "viewDoc": "查看文件",
       "viewDocFailed": "查看文件失敗"
     },
     "plugin": {

src/renderer/pages/picbeds/Picbeds.css

@@ -0,0 +1,586 @@
+/* Page Container */
+.picbeds-page {
+  position: relative;
+  overflow: hidden auto;
+  min-height: 100vh;
+  background: var(--color-background);
+}
+
+/* Ambient Background Effect */
+.ambient-bg {
+  position: fixed;
+  top: -50%;
+  left: -50%;
+  z-index: 0;
+  width: 200%;
+  height: 200%;
+  background:
+    radial-gradient(circle at 30% 20%, rgb(var(--accent-rgb) / 8%) 0%, transparent 50%),
+    radial-gradient(circle at 70% 80%, rgb(16 185 129 / 6%) 0%, transparent 50%),
+    radial-gradient(circle at 50% 50%, rgb(59 130 246 / 4%) 0%, transparent 40%);
+  animation: ambient-drift 25s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes ambient-drift {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+
+  33% {
+    transform: translate(2%, -1%) rotate(1deg);
+  }
+
+  66% {
+    transform: translate(-1%, 2%) rotate(-0.5deg);
+  }
+}
+
+/* Main Container */
+.page-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  margin: 0 auto;
+  padding: 2rem;
+  max-width: 1000px;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid rgb(var(--accent-rgb) / 15%);
+  border-radius: 20px;
+  padding: 1.5rem 2rem;
+  background: linear-gradient(
+    135deg,
+    rgb(var(--accent-rgb) / 6%) 0%,
+    var(--color-surface) 50%,
+    rgb(16 185 129 / 4%) 100%
+  );
+  box-shadow:
+    0 4px 24px rgb(0 0 0 / 8%),
+    0 1px 2px rgb(0 0 0 / 4%),
+    inset 0 1px 0 rgb(255 255 255 / 5%);
+  backdrop-filter: blur(10px);
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 14px;
+  width: 56px;
+  height: 56px;
+  color: var(--color-accent);
+  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 20%) 0%, rgb(var(--accent-rgb) / 10%) 100%);
+  box-shadow:
+    0 4px 12px rgb(var(--accent-rgb) / 20%),
+    inset 0 1px 0 rgb(255 255 255 / 10%);
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  letter-spacing: -0.025em;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.doc-link-btn {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid rgb(var(--accent-rgb) / 20%);
+  border-radius: 8px;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-accent);
+  background: rgb(var(--accent-rgb) / 8%);
+  transition: all 0.2s ease;
+  gap: 0.375rem;
+  cursor: pointer;
+}
+
+.doc-link-btn:hover {
+  border-color: var(--color-accent);
+  background: rgb(var(--accent-rgb) / 15%);
+  transform: translateY(-1px);
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.btn {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border: none;
+  border-radius: 12px;
+  padding: 0.75rem 1.25rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  font-weight: 600;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.btn-secondary {
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  box-shadow:
+    0 2px 8px rgb(0 0 0 / 8%),
+    inset 0 1px 0 rgb(255 255 255 / 5%);
+}
+
+.btn-secondary:hover {
+  background: var(--color-surface);
+  transform: translateY(-2px);
+  box-shadow:
+    0 4px 16px rgb(0 0 0 / 12%),
+    inset 0 1px 0 rgb(255 255 255 / 8%);
+}
+
+.btn-outline {
+  border: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  background: transparent;
+}
+
+.btn-outline:hover {
+  border-color: var(--color-text-secondary);
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  transform: translateY(-1px);
+}
+
+.btn-success {
+  color: white;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  box-shadow:
+    0 4px 14px rgb(16 185 129 / 35%),
+    0 2px 4px rgb(0 0 0 / 10%),
+    inset 0 1px 0 rgb(255 255 255 / 15%);
+}
+
+.btn-success:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 8px 24px rgb(16 185 129 / 45%),
+    0 4px 8px rgb(0 0 0 / 15%),
+    inset 0 1px 0 rgb(255 255 255 / 20%);
+}
+
+.btn-warning {
+  color: white;
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  box-shadow:
+    0 4px 14px rgb(245 158 11 / 35%),
+    0 2px 4px rgb(0 0 0 / 10%),
+    inset 0 1px 0 rgb(255 255 255 / 15%);
+}
+
+.btn-warning:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 8px 24px rgb(245 158 11 / 45%),
+    0 4px 8px rgb(0 0 0 / 15%);
+}
+
+.btn-glow::before {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 20%) 50%, transparent 100%);
+  transition: left 0.5s ease;
+  content: '';
+}
+
+.btn-glow:hover::before {
+  left: 100%;
+}
+
+.main-content {
+  flex: 1;
+}
+
+/* Config Card */
+.config-card {
+  overflow: hidden;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 20px;
+  background: var(--color-surface);
+  box-shadow:
+    0 4px 24px rgb(0 0 0 / 6%),
+    0 1px 2px rgb(0 0 0 / 4%);
+  animation: card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes card-enter {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 1.25rem 1.5rem;
+  background: var(--color-surface-elevated);
+  gap: 0.75rem;
+}
+
+.card-header-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 36px;
+  height: 36px;
+  color: var(--color-accent);
+  background: rgb(var(--accent-rgb) / 12%);
+}
+
+.card-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.card-body {
+  padding: 1.5rem;
+}
+
+/* Action Buttons */
+.action-buttons {
+  display: flex;
+  margin-top: 2rem;
+  border-top: 1px solid var(--color-border-secondary);
+  padding-top: 1.5rem;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.dropdown-wrapper {
+  position: relative;
+}
+
+.dropdown-trigger {
+  position: relative;
+}
+
+.dropdown-chevron {
+  margin-left: 0.25rem;
+  transition: transform 0.2s ease;
+}
+
+.dropdown-chevron.rotated {
+  transform: rotate(180deg);
+}
+
+.dropdown-menu {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 8px);
+  z-index: 1000;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  min-width: 220px;
+  background: var(--color-surface);
+  box-shadow:
+    0 -12px 40px rgb(0 0 0 / 15%),
+    0 -4px 12px rgb(0 0 0 / 8%);
+}
+
+.dropdown-header {
+  padding: 0.75rem 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+  background: var(--color-surface-elevated);
+  letter-spacing: 0.05em;
+}
+
+.dropdown-items {
+  overflow-y: auto;
+  max-height: 250px;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  border: none;
+  padding: 0.75rem 1rem;
+  width: 100%;
+  font-size: 0.875rem;
+  text-align: left;
+  color: var(--color-text-primary);
+  background: transparent;
+  transition: all 0.15s ease;
+  gap: 0.625rem;
+  cursor: pointer;
+}
+
+.dropdown-item:hover {
+  color: var(--color-accent);
+  background: rgb(var(--accent-rgb) / 8%);
+}
+
+.dropdown-item svg {
+  color: var(--color-text-tertiary);
+  transition: color 0.15s ease;
+}
+
+.dropdown-item:hover svg {
+  color: var(--color-accent);
+}
+
+/* Dropdown Transition */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(8px) scale(0.95);
+}
+
+.empty-state-card {
+  overflow: hidden;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 20px;
+  background: var(--color-surface);
+  box-shadow: 0 4px 24px rgb(0 0 0 / 6%);
+  animation: card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.empty-state {
+  padding: 4rem 2rem;
+  text-align: center;
+}
+
+.empty-icon-wrapper {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  border: 2px dashed var(--color-border);
+  border-radius: 20px;
+  width: 96px;
+  height: 96px;
+  color: var(--color-text-tertiary);
+  background: var(--color-surface-elevated);
+}
+
+.empty-title {
+  margin: 0 0 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.empty-description {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+}
+
+.loading-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(0 0 0 / 60%);
+  backdrop-filter: blur(8px);
+}
+
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.loading-spinner {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 64px;
+  height: 64px;
+}
+
+.spinner-ring {
+  position: absolute;
+  inset: 0;
+  border: 3px solid rgb(255 255 255 / 15%);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.spinner-icon {
+  color: white;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
+
+.loading-text {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: white;
+}
+
+/* Fade Transition */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@media (width <= 768px) {
+  .page-container {
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  .page-header {
+    align-items: stretch;
+    border-radius: 16px;
+    padding: 1.25rem;
+    flex-direction: column;
+  }
+
+  .header-content {
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+  }
+
+  .header-icon {
+    width: 48px;
+    height: 48px;
+  }
+
+  .title-row {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .page-title {
+    font-size: 1.25rem;
+  }
+
+  .header-actions {
+    justify-content: center;
+  }
+
+  .config-card {
+    border-radius: 16px;
+  }
+
+  .card-body {
+    padding: 1.25rem;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+  }
+
+  .btn {
+    justify-content: center;
+    width: 100%;
+  }
+
+  .dropdown-menu {
+    right: auto;
+    left: 0;
+    min-width: 100%;
+  }
+}
+
+@media (width >= 1024px) {
+  .page-container {
+    padding: 2.5rem;
+  }
+}
+
+.btn:focus-visible,
+.doc-link-btn:focus-visible,
+.dropdown-item:focus-visible {
+  outline: 1px solid var(--color-accent);
+  outline-offset: 2px;
+}

src/renderer/pages/picbeds/index.vue

@@ -1,101 +1,138 @@
 <template>
-  <div id="picbeds-page">
+  <div class="picbeds-page">
+    <!-- Ambient Background -->
+    <div class="ambient-bg" />
+
     <div class="page-container">
-      <div class="page-content">
+      <header class="page-header">
-        <!-- Header Section -->
+        <div class="header-content">
-        <div class="page-header">
+          <div class="header-icon">
-          <div class="header-title-section">
+            <Cloud :size="38" :stroke-width="1.5" />
-            <h1 class="page-title" @click="handleNameClick">{{ picBedName }} {{ t('pages.picBedConfigs.title') }}</h1>
-            <button class="link-button" :title="t('pages.picBedConfigs.viewDoc')" @click="handleNameClick">
-              <ExternalLink :size="20" />
-            </button>
           </div>
-          <button class="action-button primary" @click="handleCopyApi">
+          <div class="header-text">
-            <Copy :size="20" />
+            <div class="title-row">
-            {{ t('pages.picBedConfigs.copyAPI') }}
+              <h1 class="page-title">
+                {{ picBedName }}
+              </h1>
+              <button class="doc-link-btn" :title="t('pages.picBedConfigs.viewDoc')" @click="handleNameClick">
+                <ExternalLink :size="16" />
+                <span>{{ t('pages.picBedConfigs.viewDoc') }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="header-actions">
+          <button class="btn btn-secondary btn-glow" @click="handleCopyApi">
+            <Copy :size="16" />
+            <span>{{ t('pages.picBedConfigs.copyAPI') }}</span>
           </button>
         </div>
+      </header>
 
-        <!-- Config Form Section -->
+      <!-- Main Content Card -->
-        <div v-if="config.length > 0" class="form-section">
+      <main class="main-content">
-          <config-form :id="type" ref="$configForm" :config="config" type="uploader" color-mode="white">
+        <div v-if="config.length > 0" class="config-card">
-            <!-- Action Buttons -->
+          <!-- Card Header -->
-            <div class="action-buttons">
+          <div class="card-header">
-              <button class="action-button secondary" type="button" @click="handleReset">
+            <div class="card-header-icon">
-                <RotateCcw :size="18" />
+              <Settings :size="18" />
-                {{ t('common.reset') }}
+            </div>
-              </button>
+            <h2 class="card-title">{{ t('pages.picBedConfigs.configSettings') }}</h2>
+          </div>
 
-              <button class="action-button success" type="button" @click="handleConfirm">
+          <!-- Config Form -->
-                <Check :size="18" />
+          <div class="card-body">
-                {{ t('common.confirm') }}
+            <config-form :id="type" ref="$configForm" :config="config" type="uploader" color-mode="white">
-              </button>
+              <!-- Action Buttons -->
-
+              <div class="action-buttons">
-              <div v-if="picBedConfigList.length > 0" class="dropdown-wrapper">
+                <button class="btn btn-outline" type="button" @click="handleReset">
-                <button
+                  <RotateCcw :size="16" />
-                  class="action-button warning dropdown-trigger"
+                  <span>{{ t('common.reset') }}</span>
-                  type="button"
-                  @click="toggleDropdown"
-                  @blur="handleDropdownBlur"
-                >
-                  <Import :size="18" />
-                  {{ t('common.import') }}
-                  <svg
-                    class="dropdown-arrow"
-                    :class="{ 'dropdown-arrow-up': true }"
-                    width="12"
-                    height="8"
-                    viewBox="0 0 12 8"
-                    fill="none"
-                  >
-                    <path
-                      d="M1 1.5L6 6.5L11 1.5"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
                 </button>
 
-                <transition name="dropdown">
+                <button class="btn btn-success btn-glow" type="button" @click="handleConfirm">
-                  <div v-show="dropdownVisible" class="dropdown-menu" :class="{ 'dropdown-up': true }">
+                  <Check :size="16" />
-                    <button
+                  <span>{{ t('common.confirm') }}</span>
-                      v-for="item in picBedConfigList"
+                </button>
-                      :key="item._id"
+
-                      class="dropdown-item"
+                <div v-if="picBedConfigList.length > 0" class="dropdown-wrapper">
-                      @click="handleConfigImport(item)"
+                  <button
-                    >
+                    class="btn btn-warning btn-glow dropdown-trigger"
-                      {{ item._configName }}
+                    type="button"
-                    </button>
+                    @click="toggleDropdown"
-                  </div>
+                    @blur="handleDropdownBlur"
-                </transition>
+                  >
+                    <Import :size="16" />
+                    <span>{{ t('common.import') }}</span>
+                    <ChevronDown :size="14" class="dropdown-chevron" :class="{ rotated: dropdownVisible }" />
+                  </button>
+
+                  <Transition name="dropdown">
+                    <div v-show="dropdownVisible" class="dropdown-menu">
+                      <div class="dropdown-header">
+                        <span>{{ t('pages.picBedConfigs.selectConfig') }}</span>
+                      </div>
+                      <div class="dropdown-items">
+                        <button
+                          v-for="item in picBedConfigList"
+                          :key="item._id"
+                          class="dropdown-item"
+                          @click="handleConfigImport(item)"
+                        >
+                          <FileJson :size="14" />
+                          <span>{{ item._configName }}</span>
+                        </button>
+                      </div>
+                    </div>
+                  </Transition>
+                </div>
               </div>
-            </div>
+            </config-form>
-          </config-form>
+          </div>
         </div>
 
         <!-- Empty State -->
-        <div v-else class="empty-state">
+        <div v-else class="empty-state-card">
-          <div class="empty-content">
+          <div class="empty-state">
-            <FolderOpen class="empty-icon" :size="48" />
+            <div class="empty-icon-wrapper">
-            <h3>{{ t('pages.picBedConfigs.noConfigOptions') }}</h3>
+              <FolderOpen :size="48" />
+            </div>
+            <h3 class="empty-title">{{ t('pages.picBedConfigs.noConfigOptions') }}</h3>
+            <p class="empty-description">{{ t('pages.picBedConfigs.noConfigOptionsDesc') }}</p>
           </div>
         </div>
-      </div>
+      </main>
     </div>
 
     <!-- Loading Overlay -->
-    <div v-if="loading" class="loading-overlay">
+    <Transition name="fade">
-      <div class="loading-spinner" />
+      <div v-if="loading" class="loading-overlay">
-      <span class="loading-text">Loading...</span>
+        <div class="loading-content">
-    </div>
+          <div class="loading-spinner">
+            <div class="spinner-ring" />
+            <Cloud :size="24" class="spinner-icon" />
+          </div>
+          <span class="loading-text">{{ 'loading' }}</span>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <script lang="ts" setup>
 import dayjs from 'dayjs'
-import { Check, Copy, ExternalLink, FolderOpen, Import, RotateCcw } from 'lucide-vue-next'
+import {
+  Check,
+  ChevronDown,
+  Cloud,
+  Copy,
+  ExternalLink,
+  FileJson,
+  FolderOpen,
+  Import,
+  RotateCcw,
+  Settings,
+} from 'lucide-vue-next'
 import { onBeforeMount, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
@@ -267,426 +304,4 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped src="./Picbeds.css"></style>
-#picbeds-page {
-  position: relative;
-  min-height: 100vh;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: var(--color-background-tertiar);
-}
-
-.page-container {
-  margin: 0 auto;
-  padding: 2rem;
-  max-width: 1000px;
-}
-
-.page-content {
-  overflow: auto;
-  border: 1px solid rgb(255 255 255 / 20%);
-  border-radius: 16px;
-  background: var(--color-background-secondary);
-  box-shadow:
-    0 8px 8px rgb(0 0 0 / 12%),
-    0 4px 8px rgb(0 0 0 / 8%);
-}
-
-/* Header Section */
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid rgb(229 231 235 / 80%);
-  padding: 2rem 2rem 1.5rem;
-  background: var(--color-background-secondary);
-}
-
-.header-title-section {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.page-title {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #1f2937;
-  background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
-  background-clip: text;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  cursor: pointer;
-  -webkit-text-fill-color: transparent;
-}
-
-.page-title:hover {
-  transform: translateY(-1px);
-  filter: brightness(1.1);
-}
-
-.link-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: 8px;
-  width: 2rem;
-  height: 2rem;
-  color: #3b82f6;
-  background: rgb(59 130 246 / 10%);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  cursor: pointer;
-}
-
-.link-button:hover {
-  background: rgb(59 130 246 / 20%);
-  transform: translateY(-1px);
-}
-
-/* Action Buttons */
-.action-button {
-  position: relative;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  border: none;
-  border-radius: 12px;
-  padding: 0.75rem 1.5rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  font-weight: 500;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.action-button::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 20%), transparent);
-  transition: left 0.6s;
-}
-
-.action-button:hover::before {
-  left: 100%;
-}
-
-.action-button.primary {
-  color: white;
-  background: var(--color-blue-common);
-  box-shadow: 0 2px 2px rgb(0 122 255 / 30%);
-}
-
-.action-button.primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 2px 4px rgb(0 122 255 / 40%);
-}
-
-.action-button.secondary {
-  border: 1px solid #e2e8f0;
-  color: #475569;
-  background: var(--color-surface-elevated);
-}
-
-.action-button.secondary:hover {
-  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
-}
-
-.action-button.success {
-  color: white;
-  background: var(--color-success);
-  box-shadow: 0 4px 4px rgb(16 185 129 / 30%);
-}
-
-.action-button.success:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 6px rgb(16 185 129 / 40%);
-}
-
-.action-button.warning {
-  position: relative;
-  color: white;
-  background: var(--color-warning);
-}
-
-.action-button.warning:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 6px rgb(245 158 11 / 30%);
-}
-
-.dropdown-arrow {
-  margin-left: 0.5rem;
-  transition: transform 0.2s ease;
-}
-
-.dropdown-arrow-up {
-  transform: rotate(180deg);
-}
-
-.dropdown-trigger:hover .dropdown-arrow:not(.dropdown-arrow-up) {
-  transform: rotate(180deg);
-}
-
-.dropdown-trigger:hover .dropdown-arrow.dropdown-arrow-up {
-  transform: rotate(0deg);
-}
-
-/* Form Section */
-.form-section {
-  padding: 2rem;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 1rem;
-  margin-top: 2rem;
-  flex-wrap: wrap;
-}
-
-/* Dropdown */
-.dropdown-wrapper {
-  position: relative;
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  left: 0;
-  z-index: 1000;
-  overflow: hidden;
-  overflow-y: auto;
-  margin-top: 0.5rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  max-height: 300px;
-  background: white;
-  box-shadow: 0 8px 32px rgb(0 0 0 / 12%);
-}
-
-.dropdown-menu.dropdown-up {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-}
-
-.dropdown-item {
-  display: block;
-  border: none;
-  padding: 0.75rem 1rem;
-  width: 100%;
-  font-size: 0.875rem;
-  text-align: left;
-  color: #374151;
-  background: transparent;
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.dropdown-item:hover {
-  color: #007aff;
-  background: #f3f4f6;
-}
-
-.dropdown-item:last-child {
-  border-bottom: none;
-}
-
-/* Empty State */
-.empty-state {
-  padding: 4rem 2rem;
-  text-align: center;
-}
-
-.empty-content {
-  margin: 0 auto;
-  max-width: 400px;
-}
-
-.empty-icon {
-  margin-bottom: 1.5rem;
-  color: #9ca3af;
-}
-
-.empty-content h3 {
-  margin: 0 0 0.5rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #374151;
-}
-
-.empty-content p {
-  margin: 0;
-  color: #6b7280;
-  line-height: 1.6;
-}
-
-/* Loading Overlay */
-.loading-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 2000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgb(0 0 0 / 50%);
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.loading-spinner {
-  border: 3px solid rgb(255 255 255 / 30%);
-  border-top: 3px solid white;
-  border-radius: 50%;
-  width: 2.5rem;
-  height: 2.5rem;
-  animation: spin 1s linear infinite;
-}
-
-.loading-text {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: white;
-}
-
-/* Transitions */
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.dropdown-enter-from,
-.dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-0.5rem);
-}
-
-.dropdown-up.dropdown-enter-from,
-.dropdown-up.dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(0.5rem);
-}
-
-/* Animations */
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Dark mode adjustments */
-:root.dark #picbeds-page,
-:root.auto.dark #picbeds-page {
-  background: var(--color-background-tertiar);
-}
-
-:root.dark .page-content,
-:root.auto.dark .page-content {
-  border-color: rgb(75 85 99 / 30%);
-  background: var(--color-background-secondary);
-}
-
-:root.dark .page-header,
-:root.auto.dark .page-header {
-  border-color: rgb(75 85 99 / 30%);
-  background: var(--color-background-secondary);
-}
-
-:root.dark .page-title,
-:root.auto.dark .page-title {
-  background: linear-gradient(135deg, #f9fafb 0%, #d1d5db 100%);
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-:root.dark .dropdown-menu,
-:root.auto.dark .dropdown-menu {
-  border-color: #4b5563;
-  background: #374151;
-}
-
-:root.dark .dropdown-menu.dropdown-up,
-:root.auto.dark .dropdown-menu.dropdown-up {
-  border-color: #4b5563;
-  background: #374151;
-}
-
-:root.dark .dropdown-item,
-:root.auto.dark .dropdown-item {
-  color: #f9fafb;
-}
-
-:root.dark .dropdown-item:hover,
-:root.auto.dark .dropdown-item:hover {
-  color: #60a5fa;
-  background: #4b5563;
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .page-container {
-    padding: 1rem;
-  }
-
-  .page-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-    padding: 1.5rem;
-  }
-
-  .header-title-section {
-    width: 100%;
-  }
-
-  .action-buttons {
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .action-button {
-    justify-content: center;
-    width: 100%;
-  }
-
-  .toast {
-    top: 1rem;
-    right: 1rem;
-    left: 1rem;
-    min-width: auto;
-  }
-}
-
-@media (width <= 480px) {
-  .page-container {
-    padding: 0.5rem;
-  }
-
-  .form-section {
-    padding: 1.5rem;
-  }
-
-  .page-header {
-    padding: 1rem;
-  }
-}
-
-/* Focus styles for accessibility */
-.action-button:focus-visible,
-.link-button:focus-visible,
-.dropdown-item:focus-visible {
-  outline: 2px solid #007aff;
-  outline-offset: 2px;
-}
-</style>