✨ Feature(custom): optimize UI of multiple pages

2026-05-06 20:42:57 +08:00 · 2026-01-17 19:21:26 +08:00
parent 07c0805813
commit 8cff2c208e
22 changed files with 164 additions and 165 deletions
--- a/src/renderer/components/css/FirstTimeGuide.css
+++ b/src/renderer/components/css/FirstTimeGuide.css
@@ -172,7 +172,7 @@
 }

 .progress-dot.active {
-  background: var(--color-primary);
+  background: var(--color-accent);
  width: 20px;
  border-radius: 3px;
 }
--- a/src/renderer/components/css/ImageProcessSetting.css
+++ b/src/renderer/components/css/ImageProcessSetting.css
@@ -617,7 +617,7 @@ small {
 }

 .placeholder-category {
-  border-bottom: 1px solid var(--color-border-light);
+  border-bottom: 1px solid var(--color-border);
 }

 .placeholder-category:last-child {
@@ -626,7 +626,7 @@ small {

 .category-title {
  margin: 0;
-  border-bottom: 1px solid var(--color-border-light);
+  border-bottom: 1px solid var(--color-border);
  padding: 0.875rem 1rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
--- a/src/renderer/components/css/InputBox.css
+++ b/src/renderer/components/css/InputBox.css
@@ -59,17 +59,16 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  border: none;
  border-radius: 0.5rem;
-  padding: 0.375rem;
  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+  background: var(--color-background-tertiary);
  transition: all 0.15s ease;
  cursor: pointer;
 }

 .inputbox-close:hover {
-  color: var(--color-text-primary);
+  color: var(--color-danger);
  background: var(--color-surface-elevated);
 }

@@ -106,13 +105,13 @@
 }

 .inputbox-input:hover {
-  border-color: var(--color-border-hover);
-  background: var(--color-background-elevated);
+  border-color: var(--color-accent);
+  background: var(--color-background-tertiary);
 }

 .inputbox-input:focus {
-  border-color: var(--color-primary);
-  background: var(--color-background-elevated);
+  border-color: var(--color-accent);
+  background: var(--color-background-tertiary);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
 }

@@ -138,13 +137,13 @@
 }

 .inputbox-textarea:hover {
-  border-color: var(--color-border-hover);
-  background: var(--color-background-elevated);
+  border-color: var(--color-accent);
+  background: var(--color-background-tertiary);
 }

 .inputbox-textarea:focus {
-  border-color: var(--color-primary);
-  background: var(--color-background-elevated);
+  border-color: var(--color-accent);
+  background: var(--color-background-tertiary);
 }

 .inputbox-textarea::placeholder {
@@ -187,18 +186,18 @@
 .cancel-btn {
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
-  background: var(--color-background-elevated);
+  background: var(--color-background-secondary);
 }

 .cancel-btn:hover {
-  border-color: var(--color-border-hover);
-  background: var(--color-background-elevated-hover);
+  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
 }

 /* Confirm Button */
 .confirm-btn {
  border: none;
-  color: var(--color-text-on-primary);
+  color: var(--color-text-primary);
  background: var(--color-accent);
 }

--- a/src/renderer/components/css/NavigationPage.css
+++ b/src/renderer/components/css/NavigationPage.css
@@ -69,7 +69,7 @@

 .app-text:hover {
  cursor: pointer;
-  color: var(--color-blue-common);
+  color: var(--color-accent);
 }

 .app-version {
@@ -79,7 +79,7 @@
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-secondary);
-  background: var(--color-surface);
+  background: var(--color-background-secondary);
 }

 .theme-section {
--- a/src/renderer/components/css/PerPicbedSetting.css
+++ b/src/renderer/components/css/PerPicbedSetting.css
@@ -284,7 +284,7 @@
 }

 .radio-input:checked + .radio-indicator {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent);
 }

 .radio-input:checked + .radio-indicator::after {
@@ -294,7 +294,7 @@
  border-radius: 50%;
  width: 6px;
  height: 6px;
-  background: var(--color-blue-common);
+  background: var(--color-accent);
  content: '';
  transform: translate(-50%, -50%);
 }
--- a/src/renderer/components/ui/TitleBar.vue
+++ b/src/renderer/components/ui/TitleBar.vue
@@ -3,7 +3,7 @@
    <div class="title-bar-content">
      <div v-if="osGlobal !== 'darwin'" class="title-left">
        <div class="app-icon">
-          <img :src="defaultLogo" width="20" height="20" />
+          <img :src="defaultLogo" width="18" height="18" />
        </div>
      </div>

--- a/src/renderer/i18n/locales/en.json
+++ b/src/renderer/i18n/locales/en.json
@@ -264,6 +264,7 @@
        "getFileListFailed": "Get file list failed",
        "getFileListSuccess": "Get file list success",
        "getInBackground": "Getting file list in background, please do not switch pages",
+        "imagePreview": "Image Preview",
        "includeExt": "Include file extensions when replacing",
        "inputCustomDomain": "Enter Custom Domain",
        "inputFolderTitle": "Please enter folder name",
--- a/src/renderer/i18n/locales/zh-CN.json
+++ b/src/renderer/i18n/locales/zh-CN.json
@@ -264,6 +264,7 @@
        "getFileListFailed": "获取文件列表失败",
        "getFileListSuccess": "获取文件列表成功",
        "getInBackground": "正在后台获取文件列表，请不要切换页面",
+        "imagePreview": "图像预览",
        "includeExt": "替换时包含后缀名",
        "inputCustomDomain": "输入自定义域名",
        "inputFolderTitle": "请输入文件夹名称",
--- a/src/renderer/i18n/locales/zh-TW.json
+++ b/src/renderer/i18n/locales/zh-TW.json
@@ -264,6 +264,7 @@
        "getFileListFailed": "取得檔案清單失敗",
        "getFileListSuccess": "取得檔案清單成功",
        "getInBackground": "正在背景取得檔案清單，請不要切換頁面",
+        "imagePreview": "圖像預覽",
        "includeExt": "替換時包含副檔名",
        "inputCustomDomain": "輸入自訂網域名稱",
        "inputFolderTitle": "請輸入資料夾名稱",
--- a/src/renderer/manage/components/CustomSwitch.vue
+++ b/src/renderer/manage/components/CustomSwitch.vue
@@ -131,8 +131,8 @@ const toggleTooltip = () => {
 .switch {
  position: relative;
  display: inline-block;
-  width: 3rem;
-  height: 1.5rem;
+  width: 44px;
+  height: 20px;
 }

 .switch-input {
@@ -144,30 +144,37 @@ const toggleTooltip = () => {
 .switch-slider {
  position: absolute;
  inset: 0;
-  border-radius: 0.75rem;
-  background: var(--color-primary);
-  transition: var(--transition-fast);
+  border-radius: 24px;
+  background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
+  box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
 }

 .switch-button {
  position: absolute;
-  top: 2px;
+  bottom: 2px;
  left: 2px;
  border-radius: 50%;
-  width: 1.25rem;
-  height: 1.25rem;
-  background: white;
-  box-shadow: var(--shadow-sm);
-  transition: var(--transition-fast);
+  width: 17px;
+  height: 17px;
+  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+  box-shadow:
+    0 2px 6px rgb(0 0 0 / 20%),
+    0 1px 2px rgb(0 0 0 / 10%);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  content: '';
 }

 .switch-input:checked + .switch-slider {
  background: var(--color-accent);
+  box-shadow:
+    inset 0 1px 3px rgb(0 0 0 / 10%),
+    0 2px 8px color-mix(in srgb, var(--color-accent), transparent 30%);
 }

 .switch-input:checked + .switch-slider .switch-button {
-  transform: translateX(1.5rem);
+  transform: translateX(23px);
 }

 .switch-input:focus + .switch-slider {
--- a/src/renderer/manage/pages/BucketPage.vue
+++ b/src/renderer/manage/pages/BucketPage.vue
@@ -579,7 +579,7 @@
    <div v-if="isShowImagePreview" class="modal-overlay" @click="isShowImagePreview = false">
      <div class="modal-container" style="max-width: 90vw; max-height: 90vh" @click.stop>
        <div class="modal-header">
-          <h3 class="modal-title">Image Preview</h3>
+          <h3 class="modal-title">{{ t('pages.manage.bucket.imagePreview') }}</h3>
          <button class="modal-close" @click="isShowImagePreview = false">
            <XIcon class="action-icon" />
          </button>
--- a/src/renderer/manage/pages/css/BucketPage.css
+++ b/src/renderer/manage/pages/css/BucketPage.css
@@ -59,9 +59,8 @@

 .custom-domain-input:focus {
  border-color: var(--color-accent);
-  background: white;
  outline: none;
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
 }

 .custom-domain-select {
@@ -185,8 +184,7 @@
 }

 .action-button.secondary:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
+  border-color: var(--color-accent-hover);
 }

 .action-button.danger {
@@ -217,8 +215,8 @@
 .search-input:focus {
  border-color: var(--color-accent);
  outline: none;
-  background: white;
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
+  background: var(--color-background-tertiary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
 }

 /* Breadcrumb */
@@ -476,7 +474,7 @@

 .virtual-gallery-scroller .file-grid-item.selected {
  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 40%);
 }

 .virtual-gallery-scroller .file-preview {
@@ -773,7 +771,7 @@
 }

 .file-actions-dropdown-item:hover {
-  color: var(--color-blue-common);
+  color: var(--color-accent);
  background: var(--color-surface-elevated);
 }

--- a/src/renderer/manage/pages/css/LoginPage.css
+++ b/src/renderer/manage/pages/css/LoginPage.css
@@ -47,7 +47,7 @@
 .header-icon {
  display: flex;
  align-items: center;
-  color: var(--color-blue-common);
+  color: var(--color-accent);
 }

 .header-content h1 {
@@ -174,13 +174,13 @@
 .tab-button:hover {
  border-color: var(--color-border);
  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
+  background: var(--color-background-tertiary);
 }

 .tab-button.active {
-  border-color: var(--color-primary);
+  border-color: var(--color-border-secondary);
  color: white;
-  background: var(--color-primary);
+  background: var(--color-accent);
 }

 .tab-icon {
@@ -379,7 +379,7 @@

 .info-card.primary {
  border: 1px solid rgb(99 102 241 / 20%);
-  color: var(--color-primary);
+  color: var(--color-accent);
  background: rgb(99 102 241 / 10%);
 }

--- a/src/renderer/manage/pages/css/ManageMain.css
+++ b/src/renderer/manage/pages/css/ManageMain.css
@@ -277,8 +277,8 @@ html, body {
  align-items: center;
  border: none;
  border-radius: var(--radius-lg);
-  padding: 0.75rem 1.5rem;
-  font-size: 0.875rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.8rem;
  font-family: inherit;
  font-weight: 500;
  transition: var(--transition-fast);
@@ -300,18 +300,16 @@ html, body {
 .action-button.secondary {
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
+  background: var(--color-accent);
 }

 .action-button.secondary:hover {
  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: var(--color-surface);
 }

 .button-icon {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
 }

 /* Dialog styles */
@@ -347,6 +345,7 @@ html, body {

 .dialog-title {
  font-size: 1.25rem;
+  margin-bottom: 10px;
  font-weight: 600;
  color: var(--color-text-primary);
 }
@@ -355,7 +354,7 @@ html, body {
  display: flex;
  justify-content: center;
  align-items: center;
-  border: none;
+  border: 1px solid var(--color-border);
  border-radius: 6px;
  width: 32px;
  height: 32px;
@@ -368,7 +367,7 @@ html, body {

 .dialog-close:hover {
  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
+  background: var(--color-surface);
 }

 .close-icon {
@@ -394,10 +393,10 @@ html, body {
  position: relative;
  display: flex;
  align-items: center;
-  border: 1px solid var(--color-border);
+  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
-  background: var(--color-surface-elevated);
+  background: var(--color-background-secondary);
  transition: var(--transition-fast);
  flex-direction: column;
  cursor: pointer;
@@ -411,16 +410,16 @@ html, body {

 .picbed-card.active {
  border-color: var(--color-accent);
-  background-color: rgb(64 158 255 / 10%);
+  background-color: var(--color-surface);
 }

 .picbed-card.main-card {
-  border-color: var(--color-error);
+  border-color: var(--color-primary);
 }

 .picbed-card.main-card:hover {
-  border-color: var(--color-error);
-  background-color: rgb(255 59 48 / 10%);
+  border-color: var(--color-primary);
+  background-color: var(--color-surface);
 }

 .card-icon {
@@ -449,8 +448,8 @@ html, body {
 }

 .card-title {
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: 0.9rem;
+  font-weight: 600;
  color: var(--color-text-primary);
 }

--- a/src/renderer/manage/pages/css/ManageSetting.css
+++ b/src/renderer/manage/pages/css/ManageSetting.css
@@ -177,7 +177,7 @@
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
-  color: var(--color-accent);
+  color: var(--color-text-primary);
 }

 /* Pattern Table */
@@ -190,6 +190,7 @@
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
+  font-weight: 600;
 }

 .pattern-table th {
@@ -234,7 +235,7 @@
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.625rem;
-  background: var(--color-background-secondary);
+  background: var(--color-background-t);
  transition: var(--transition-fast);
  gap: 0.75rem;
  cursor: pointer;
@@ -264,7 +265,7 @@
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
-  background: var(--color-surface-elevated);
+  background: var(--color-background-tiertiary);
  transition: var(--transition-fast);
  flex-shrink: 0;
 }
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -95,7 +95,7 @@
            <div class="filter-group">
              <label class="filter-label">{{ t('pages.gallery.pasteFormat') }}</label>
              <select v-model="pasteStyle" class="custom-select" @change="handlePasteStyleChange">
-                <option v-for="(value, key) in pasteStyleMap" :key="key" :value="value">
+                <option v-for="(value, key) in pasteStyleMap" :key="key" :value="value" class="select-option">
                  {{ key }}
                </option>
              </select>
@@ -104,7 +104,7 @@
            <div class="filter-group">
              <label class="filter-label">{{ t('pages.gallery.urlType') }}</label>
              <select v-model="useShortUrl" class="custom-select" @change="handleUseShortUrlChange">
-                <option v-for="(value, key) in shortURLMap" :key="key" :value="value">
+                <option v-for="(value, key) in shortURLMap" :key="key" :value="value" class="select-option">
                  {{ key }}
                </option>
              </select>
@@ -144,7 +144,7 @@
                  :placeholder="$t('pages.gallery.searchFilename')"
                />
                <button v-if="searchText" class="clear-button" @click="cleanSearch">
-                  <XIcon :size="14" />
+                  <XIcon :size="15" />
                </button>
              </div>
            </div>
--- a/src/renderer/pages/RenamePage.vue
+++ b/src/renderer/pages/RenamePage.vue
@@ -180,9 +180,9 @@ export default {
 }

 .form-input:focus {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent);
  outline: none;
-  box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-hover), transparent 60%);
 }

 .form-input.input-error {
--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
@@ -103,7 +103,7 @@ html, body {
  align-items: center;
  border: none;
  border-radius: var(--radius-md);
-  padding: 0.625rem 1rem;
+  padding: 0.325rem 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 500;
@@ -145,7 +145,7 @@ html, body {
  position: relative;
  display: inline-block;
  width: 44px;
-  height: 24px;
+  height: 20px;
 }

 .custom-switch input {
@@ -166,11 +166,11 @@ html, body {

 .switch-slider::before {
  position: absolute;
-  bottom: 3px;
-  left: 3px;
+  bottom: 2px;
+  left: 2px;
  border-radius: 50%;
-  width: 18px;
-  height: 18px;
+  width: 17px;
+  height: 17px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  box-shadow:
    0 2px 6px rgb(0 0 0 / 20%),
@@ -183,11 +183,11 @@ input:checked + .switch-slider {
  background: var(--color-accent);
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 10%),
-    0 2px 8px rgb(64 158 255 / 30%);
+    0 2px 8px color-mix(in srgb, var(--color-accent), transparent 30%);
 }

 input:checked + .switch-slider::before {
-  transform: translateX(20px);
+  transform: translateX(22px);
 }

 /* Grid Size Control */
@@ -220,8 +220,8 @@ input:checked + .switch-slider::before {

 .grid-slider::-webkit-slider-thumb {
  border-radius: 50%;
-  width: 14px;
-  height: 14px;
+  width: 15px;
+  height: 15px;
  background: var(--color-accent);
  transition: var(--transition-fast);
  appearance: none;
@@ -230,7 +230,7 @@ input:checked + .switch-slider::before {

 .grid-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
-  box-shadow: 0 0 0 3px rgb(56 114 250 / 20%);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 60%);
 }

 .grid-slider::-moz-range-thumb {
@@ -245,7 +245,7 @@ input:checked + .switch-slider::before {

 .grid-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
-  box-shadow: 0 0 0 3px rgb(56 114 250 / 20%);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent), transparent 60%);
 }

 .grid-value {
@@ -311,16 +311,22 @@ input:checked + .switch-slider::before {
  font-size: 0.85rem;
  text-align: center;
  color: var(--color-text-primary);
-  background: var(--color-surface);
+  background: var(--color-background-secondary);
  transition: var(--transition-fast);
  cursor: pointer;
  line-height: 1.4;
 }

 .custom-select:focus {
-  border-color: var(--color-accent-hover);
+  border-color: var(--color-accent);
  outline: none;
-  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent), transparent 80%);
+}
+
+.select-option {
+  font-size: 0.85rem;
+  color: var(--color-text-primary);
+  background: var(--color-background-tertiary);
 }

 /* Custom Multiselect */
@@ -339,7 +345,7 @@ input:checked + .switch-slider::before {
  height: 28px;
  font-size: 0.85rem;
  color: var(--color-text-primary);
-  background: var(--color-surface);
+  background: var(--color-background-secondary);
  transition: var(--transition-fast);
  cursor: pointer;
  line-height: 1.4;
@@ -352,7 +358,7 @@ input:checked + .switch-slider::before {
 .multiselect-trigger:focus,
 .multiselect-trigger.active {
  border-color: var(--color-accent-hover);
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 10%);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 80%);
 }

 .multiselect-dropdown {
@@ -409,7 +415,7 @@ input:checked + .switch-slider::before {
  height: 28px;
  font-size: 0.75rem;
  color: var(--color-text-primary);
-  background: var(--color-surface);
+  background: var(--color-background-secondary);
  transition: var(--transition-fast);
  flex: 1;
  line-height: 1.2;
@@ -443,7 +449,7 @@ input:checked + .switch-slider::before {
  height: 28px;
  font-size: 0.85rem;
  color: var(--color-text-primary);
-  background: var(--color-surface);
+  background: var(--color-background-secondary);
  transition: var(--transition-fast);
  gap: 0.25rem;
  cursor: pointer;
@@ -457,7 +463,7 @@ input:checked + .switch-slider::before {
 .sort-button:focus,
 .sort-button.active {
  border-color: var(--color-accent-hover);
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 10%);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 80%);
 }

 .sort-options {
@@ -467,7 +473,7 @@ input:checked + .switch-slider::before {
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  min-width: 160px;
-  background: var(--color-surface-elevated);
+  background: var(--color-background-tertiary);
  box-shadow: var(--shadow-lg);
 }

@@ -480,7 +486,7 @@ input:checked + .switch-slider::before {
  font-size: 0.95rem;
  text-align: center;
  color: var(--color-text-primary);
-  background: var(--color-surface);
+  background: var(--color-background-tertiary);
  transition: var(--transition-fast);
  cursor: pointer;
  line-height: 1.4;
@@ -513,14 +519,18 @@ input:checked + .switch-slider::before {
  width: 100%;
  font-size: 0.8rem;
  color: var(--color-text-primary);
-  background: var(--color-surface);
+  background: var(--color-background-secondary);
  transition: var(--transition-fast);
 }

 .search-input:focus {
  border-color: var(--color-accent-hover);
  outline: none;
-  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-hover), transparent 40%);
+}
+
+.search-input::placeholder {
+  color: var(--color-text-secondary);
 }

 .search-icon {
@@ -559,7 +569,7 @@ input:checked + .switch-slider::before {
  align-items: center;
  border: none;
  border-radius: var(--radius-md);
-  padding: 0.625rem 1rem;
+  padding: 0.425rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0.5;
@@ -650,7 +660,7 @@ input:checked + .switch-slider::before {

 .empty-icon {
  margin-bottom: 1rem;
-  color: var(--color-text-secondary);
+  color: var(--color-accent);
 }

 .empty-state h3 {
@@ -673,8 +683,6 @@ input:checked + .switch-slider::before {
  padding: 1.5rem;
 }

-
-
 /* Image Container */

 .image-placeholder {
@@ -726,7 +734,7 @@ input:checked + .switch-slider::before {

 .icon-button {
  display: flex;
-  justify-content: left;
+  justify-content: center;
  align-items: center;
  border: none;
  border-radius: var(--radius-md);
@@ -744,18 +752,18 @@ input:checked + .switch-slider::before {
 }

 .copy-icon:hover {
-  color: var(--color-copy);
-  background: rgb(6 182 212 / 10%);
+  color: var(--color-warning);
+  background: color-mix(in srgb, var(--color-warning), transparent 90%);
 }

 .edit-icon:hover {
  color: var(--color-success);
-  background: rgb(16 185 129 / 10%);
+  background: color-mix(in srgb, var(--color-success), transparent 90%);
 }

 .delete-icon:hover {
  color: var(--color-error);
-  background: rgb(239 68 68 / 10%);
+  background: color-mix(in srgb, var(--color-error), transparent 90%);
 }

 /* Custom Checkbox */
@@ -779,8 +787,8 @@ input:checked + .switch-slider::before {
  display: inline-block;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
  transition: var(--transition-fast);
 }

@@ -791,8 +799,8 @@ input:checked + .switch-slider::before {

 .custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after {
  position: absolute;
-  top: -1px;
-  left: 3px;
+  top: -2px;
+  left: 1px;
  font-size: 12px;
  font-weight: bold;
  color: white;
@@ -922,7 +930,7 @@ input:checked + .switch-slider::before {
  margin: 0;
  margin-right: 1rem;
  font-size: 1rem;
-  font-weight: 500;
+  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
@@ -931,8 +939,11 @@ input:checked + .switch-slider::before {

 .image-counter {
  font-size: 0.875rem;
+  margin-right: 1rem;
+  margin-top: 0.25rem;
+  font-weight: 600;
  white-space: nowrap;
-  color: var(--color-text-secondary);
+  color: var(--color-text-primary);
 }

 /* Modal Overlay */
@@ -979,19 +990,19 @@ input:checked + .switch-slider::before {
  display: flex;
  justify-content: center;
  align-items: center;
-  border: none;
+  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  width: 32px;
  height: 32px;
  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
+  background: var(--color-background-tertiary);
  transition: var(--transition-fast);
  cursor: pointer;
 }

 .modal-close-btn:hover {
  color: var(--color-text-primary);
-  background: var(--color-border-secondary);
+  background: var(--color-surface-elevated);
 }

 .modal-body {
@@ -1038,7 +1049,7 @@ input:checked + .switch-slider::before {
 }

 .form-input:focus {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
 }
@@ -1061,21 +1072,6 @@ input:checked + .switch-slider::before {
  background: var(--color-accent-hover);
 }

-.info-panel {
-  margin-top: 1rem;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 1rem;
-  background: var(--color-surface-elevated);
-}
-
-.info-panel h4 {
-  margin: 0 0 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
 .placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -1335,8 +1331,8 @@ input:checked + .switch-slider::before {
 }

 .virtual-gallery-scroller .gallery-item.selected {
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 40%);
 }

 .virtual-gallery-scroller .image-container {
@@ -1352,8 +1348,8 @@ input:checked + .switch-slider::before {
 }

 .virtual-gallery-scroller .image-container.selected {
-  outline: 2px solid var(--color-blue-common);
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
+  outline: 2px solid var(--color-accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 60%);
 }

 .virtual-gallery-scroller .image-info {
@@ -1441,8 +1437,9 @@ input:checked + .switch-slider::before {
 .image-help-text {
  margin-top: 0.25rem;
  font-size: 0.75rem;
+  font-weight: 500;
  text-align: center;
-  color: var(--color-text-tertiary);
+  color: var(--color-text-primary);
 }

 .image-viewer:active {
@@ -1504,7 +1501,7 @@ input:checked + .switch-slider::before {
 }

 .placeholder-category {
-  border-bottom: 1px solid var(--color-border-light);
+  border-bottom: 1px solid var(--color-border);
 }

 .placeholder-category:last-child {
@@ -1513,7 +1510,7 @@ input:checked + .switch-slider::before {

 .category-title {
  margin: 0;
-  border-bottom: 1px solid var(--color-border-light);
+  border-bottom: 1px solid var(--color-border);
  padding: 0.875rem 1rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
--- a/src/renderer/pages/css/PicgoSetting.css
+++ b/src/renderer/pages/css/PicgoSetting.css
@@ -185,9 +185,9 @@

 .switch-slider {
  position: relative;
-  border-radius: 12px;
+  border-radius: 24px;
  width: 44px;
-  height: 24px;
+  height: 21px;
  background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -199,8 +199,8 @@
  top: 2px;
  left: 2px;
  border-radius: 50%;
-  width: 20px;
-  height: 20px;
+  width: 17px;
+  height: 17px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  box-shadow:
    0 2px 6px rgb(0 0 0 / 20%),
@@ -213,11 +213,11 @@
  background: var(--color-accent);
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 10%),
-    0 2px 8px rgb(64 158 255 / 30%);
+    0 2px 8px color-mix(in srgb, var(--color-accent), transparent 30%);
 }

 .switch-input:checked + .switch-slider::before {
-  transform: translateX(20px);
+  transform: translateX(23px);
 }

 .switch-content {
@@ -494,7 +494,7 @@ small {
 }

 .placeholder-category {
-  border-bottom: 1px solid var(--color-border-light);
+  border-bottom: 1px solid var(--color-border);
 }

 .placeholder-category:last-child {
@@ -503,7 +503,7 @@ small {

 .category-title {
  margin: 0;
-  border-bottom: 1px solid var(--color-border-light);
+  border-bottom: 1px solid var(--color-border);
  padding: 0.875rem 1rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
@@ -905,8 +905,8 @@ small {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
-  color: var(--color-primary);
-  background: var(--color-surface-elevated);
+  color: var(--color-accent);
+  background: var(--color-background-tertiary);
  letter-spacing: 0.02em;
 }

--- a/src/renderer/pages/css/PluginPage.css
+++ b/src/renderer/pages/css/PluginPage.css
@@ -219,7 +219,7 @@ html, body {
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
-  color: var(--color-text);
+  color: var(--color-text-primary);
  gap: 0.5rem;
 }

@@ -235,8 +235,8 @@ html, body {
 }

 .checkbox-input:checked + .checkbox-label::before {
-  border-color: var(--color-primary);
-  background: var(--color-primary);
+  border-color: var(--color-accent);
+  background: var(--color-accent);
 }

 .checkbox-input:checked + .checkbox-label::after {
@@ -249,7 +249,7 @@ html, body {
 }

 .checkbox-label:hover::before {
-  border-color: var(--color-primary);
+  border-color: var(--color-accent);
 }

 .checkbox-description {
--- a/src/renderer/pages/css/ShortKey.css
+++ b/src/renderer/pages/css/ShortKey.css
@@ -334,7 +334,7 @@
 }

 .form-input:focus {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
 }
--- a/src/renderer/pages/css/UploadPage.css
+++ b/src/renderer/pages/css/UploadPage.css
@@ -162,7 +162,7 @@ html, body {
 .picbed-badge:hover {
  border-color: var(--color-accent-hover);
  color: var(--color-accent-hover);
-  background: var(--color-surface-elevated);
+  background: var(--color-background-tertiary);
  transform: translateY(-1px);
 }

@@ -350,7 +350,7 @@ html, body {
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 500;
-  color: var(--color-text-sec);
+  color: var(--color-text-secondary);
  background: transparent;
  transition: var(--transition-fast);
  gap: 0.5rem;
@@ -364,12 +364,7 @@ html, body {

 .segmented-button:hover {
  color: var(--color-accent-hover);
-  background: var(--color-surface-elevated);
-}
-
-.segmented-button:active {
-  background: var(--color-surface-elevated);
-  transform: scale(0.98);
+  background: var(--color-background-tertiary);
 }

 /* Main Upload Card */
@@ -1524,7 +1519,7 @@ html, body {
  padding: 0.625rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
-  background: white;
+  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);