✨ Feature(custom): support script market and share or download scripts

src/renderer/components/Editor.vue

@@ -16,6 +16,7 @@ import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
 const props = defineProps({
   modelValue: { type: String, default: '' },
   language: { type: String, default: 'javascript' },
+  readOnly: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -35,6 +36,7 @@ onMounted(() => {
       search({ top: true }),
       keymap.of([...searchKeymap]),
       EditorView.lineWrapping,
+      EditorView.editable.of(!props.readOnly),
       EditorView.updateListener.of(update => {
         if (update.docChanged) {
           emit('update:modelValue', update.state.doc.toString())

src/renderer/i18n/locales/en.json

@@ -736,6 +736,55 @@
       "emptyScriptList": "Script list is empty",
       "enabled": "Enabled",
       "enableScript": "Enable Script",
+      "marketplace": {
+        "allCategories": "All Categories",
+        "author": "Author",
+        "browseMarketplace": "Browse Marketplace",
+        "category": "Category",
+        "codeCopied": "Code copied to clipboard",
+        "copyCode": "Copy code",
+        "description": "Browse and download community scripts",
+        "deviceCodeExpired": "Device code expired. Please try again.",
+        "deviceFlowInstructions": "A browser window has opened. Enter the code below on GitHub to authorize PicList.",
+        "download": "Download",
+        "downloaded": "Downloaded",
+        "downloadFailed": "Failed to download script",
+        "downloading": "Downloading...",
+        "downloadSuccess": "Script downloaded successfully",
+        "filterByCategory": "Filter by category",
+        "loadFailed": "Failed to load marketplace scripts",
+        "loadingScripts": "Loading scripts...",
+        "loggedInAs": "Logged in as {username}",
+        "loginFailed": "GitHub login failed",
+        "loginRequired": "Please login with GitHub to share scripts",
+        "loginSuccess": "GitHub login successful",
+        "loginWithGitHub": "Login with GitHub",
+        "logout": "Logout",
+        "logoutSuccess": "Logged out successfully",
+        "metadataRequired": "Please fill in all metadata fields",
+        "noScriptsFound": "No scripts found in marketplace",
+        "openMarketplaceRepo": "Open Marketplace Repository",
+        "prCreated": "Pull request created successfully",
+        "retry": "Retry",
+        "scriptAuthor": "Author Name",
+        "scriptContent": "Script Content",
+        "scriptDescription": "Description",
+        "scriptMetadata": "Script Metadata",
+        "scriptName": "Script Name",
+        "scriptVersion": "脚本版本",
+        "searchPlaceholder": "Search scripts...",
+        "share": "Share Script",
+        "shareFailed": "Failed to share script",
+        "shareScript": "Share to Marketplace",
+        "shareSuccess": "Script shared successfully! PR created.",
+        "sharing": "Sharing...",
+        "showScriptCode": "Show Code",
+        "title": "Script Marketplace",
+        "version": "Version",
+        "viewPR": "View Pull Request",
+        "waitingForAuth": "Waiting for authorization...",
+        "yourCode": "Your verification code:"
+      },
       "newScript": "New Script",
       "NoScripts": "No Scripts",
       "noScriptsFound": "No Scripts Found",

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

@@ -736,6 +736,55 @@
       "emptyScriptList": "脚本列表为空",
       "enabled": "已启用",
       "enableScript": "启用脚本",
+      "marketplace": {
+        "allCategories": "全部分类",
+        "author": "作者",
+        "browseMarketplace": "浏览市场",
+        "category": "分类",
+        "codeCopied": "代码已复制到剪贴板",
+        "copyCode": "复制代码",
+        "description": "浏览和下载社区脚本",
+        "deviceCodeExpired": "设备代码已过期，请重试。",
+        "deviceFlowInstructions": "浏览器窗口已打开。请在 GitHub 上输入以下代码以授权 PicList。",
+        "download": "下载",
+        "downloaded": "已下载",
+        "downloadFailed": "脚本下载失败",
+        "downloading": "下载中...",
+        "downloadSuccess": "脚本下载成功",
+        "filterByCategory": "按分类筛选",
+        "loadFailed": "加载市场脚本失败",
+        "loadingScripts": "正在加载脚本...",
+        "loggedInAs": "已登录为 {username}",
+        "loginFailed": "GitHub 登录失败",
+        "loginRequired": "请使用 GitHub 登录以分享脚本",
+        "loginSuccess": "GitHub 登录成功",
+        "loginWithGitHub": "使用 GitHub 登录",
+        "logout": "退出登录",
+        "logoutSuccess": "已退出登录",
+        "metadataRequired": "请填写所有元数据字段",
+        "noScriptsFound": "市场中暂无脚本",
+        "openMarketplaceRepo": "打开市场仓库",
+        "prCreated": "Pull Request 创建成功",
+        "retry": "重试",
+        "scriptAuthor": "作者名称",
+        "scriptContent": "脚本内容",
+        "scriptDescription": "描述",
+        "scriptMetadata": "脚本元数据",
+        "scriptName": "脚本名称",
+        "scriptVersion": "脚本版本",
+        "searchPlaceholder": "搜索脚本...",
+        "share": "分享脚本",
+        "shareFailed": "脚本分享失败",
+        "shareScript": "分享到市场",
+        "shareSuccess": "脚本分享成功！已创建 PR。",
+        "sharing": "分享中...",
+        "showScriptCode": "显示代码",
+        "title": "脚本市场",
+        "version": "版本",
+        "viewPR": "查看 Pull Request",
+        "waitingForAuth": "等待授权中...",
+        "yourCode": "您的验证码："
+      },
       "newScript": "新脚本",
       "NoScripts": "暂无脚本",
       "noScriptsFound": "未找到脚本",

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

@@ -736,6 +736,55 @@
       "emptyScriptList": "腳本列表為空",
       "enabled": "已啟用",
       "enableScript": "啟用腳本",
+      "marketplace": {
+        "allCategories": "全部分類",
+        "author": "作者",
+        "browseMarketplace": "瀏覽市場",
+        "category": "分類",
+        "codeCopied": "代碼已複製到剪貼板",
+        "copyCode": "複製代碼",
+        "description": "瀏覽和下載社區腳本",
+        "deviceCodeExpired": "設備代碼已過期，請重試。",
+        "deviceFlowInstructions": "瀏覽器視窗已開啟。請在 GitHub 上輸入以下代碼以授權 PicList。",
+        "download": "下載",
+        "downloaded": "已下載",
+        "downloadFailed": "腳本下載失敗",
+        "downloading": "下載中...",
+        "downloadSuccess": "腳本下載成功",
+        "filterByCategory": "按分類篩選",
+        "loadFailed": "加載市場腳本失敗",
+        "loadingScripts": "正在加載腳本...",
+        "loggedInAs": "已登錄為 {username}",
+        "loginFailed": "GitHub 登錄失敗",
+        "loginRequired": "請使用 GitHub 登錄以分享腳本",
+        "loginSuccess": "GitHub 登錄成功",
+        "loginWithGitHub": "使用 GitHub 登錄",
+        "logout": "退出登錄",
+        "logoutSuccess": "已退出登錄",
+        "metadataRequired": "請填寫所有元數據字段",
+        "noScriptsFound": "市場中暫無腳本",
+        "openMarketplaceRepo": "打開市場倉庫",
+        "prCreated": "Pull Request 創建成功",
+        "retry": "重試",
+        "scriptAuthor": "作者名稱",
+        "scriptContent": "腳本內容",
+        "scriptDescription": "描述",
+        "scriptMetadata": "腳本元數據",
+        "scriptName": "腳本名稱",
+        "scriptVersion": "脚本版本",
+        "searchPlaceholder": "搜索腳本...",
+        "share": "分享腳本",
+        "shareFailed": "腳本分享失敗",
+        "shareScript": "分享到市場",
+        "shareSuccess": "腳本分享成功！已創建 PR。",
+        "sharing": "分享中...",
+        "showScriptCode": "顯示代碼",
+        "title": "腳本市場",
+        "version": "版本",
+        "viewPR": "查看 Pull Request",
+        "waitingForAuth": "等待授權中...",
+        "yourCode": "您的驗證碼："
+      },
       "newScript": "新腳本",
       "NoScripts": "暫無腳本",
       "noScriptsFound": "未找到腳本",

src/renderer/pages/ScriptPage.vue

@@ -12,6 +12,12 @@
           </div>
         </div>
         <div class="flex flex-wrap gap-3 overflow-visible">
+          <CustomButton
+            type="secondary"
+            :icon="StoreIcon"
+            :text="t('pages.scripts.marketplace.browseMarketplace')"
+            @click="openMarketplace"
+          />
           <CustomButton
             type="primary"
             :icon="FolderOpen"
@@ -83,6 +89,13 @@
                   >
                     <Trash2 :size="14" />
                   </button>
+                  <button
+                    class="action-btn bg-accent text-white!"
+                    :title="t('pages.scripts.marketplace.shareScript')"
+                    @click.stop="openShareDialog(item)"
+                  >
+                    <Share2Icon :size="14" />
+                  </button>
                   <button
                     v-if="item.category === 'manualTrigger'"
                     class="action-btn bg-accent/50 text-white!"
@@ -207,6 +220,304 @@
         <CustomButton type="primary" :text="t('common.confirm')" @click="handleNewScriptNameConfirm" />
       </template>
     </CustomModal>
+
+    <CustomModal
+      v-if="marketplaceVisible"
+      v-model:visible="marketplaceVisible"
+      :title="t('pages.scripts.marketplace.title')"
+    >
+      <div class="flex h-full w-full flex-col gap-4 p-4">
+        <div class="flex flex-wrap items-center justify-between gap-4">
+          <div class="relative flex flex-1 items-center">
+            <SearchIcon class="absolute left-3 z-1 text-secondary" :size="18" />
+            <input
+              v-model="marketplaceSearch"
+              type="text"
+              class="w-full rounded-lg border border-border bg-bg-secondary px-10 py-2 text-sm text-main placeholder:text-secondary focus:border-accent focus:outline-none"
+              :placeholder="t('pages.scripts.marketplace.searchPlaceholder')"
+            />
+          </div>
+          <div class="flex items-center gap-2">
+            <template v-if="githubAuth.isAuthenticated">
+              <span class="text-sm text-secondary">
+                {{ t('pages.scripts.marketplace.loggedInAs', { username: githubAuth.username }) }}
+              </span>
+              <CustomButton
+                type="secondary"
+                :icon="LogOutIcon"
+                :text="t('pages.scripts.marketplace.logout')"
+                @click="handleGitHubLogout"
+              />
+            </template>
+            <template v-else>
+              <CustomButton
+                type="secondary"
+                :icon="null"
+                :text="t('pages.scripts.marketplace.loginWithGitHub')"
+                @click="handleGitHubLogin"
+              >
+                <template #icon>
+                  <svg width="18" height="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <title>GitHub</title>
+                    <path
+                      d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+                    />
+                  </svg>
+                </template>
+              </CustomButton>
+            </template>
+            <CustomButton
+              type="secondary"
+              :icon="ExternalLinkIcon"
+              :text="t('pages.scripts.marketplace.openMarketplaceRepo')"
+              @click="openMarketplaceRepo"
+            />
+          </div>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <MultiSelect
+            v-model:choosed="marketplaceCategoryFilter"
+            :zero-placeholder="t('pages.scripts.marketplace.allCategories')"
+            :all-list="supportedScriptCategories"
+          />
+        </div>
+
+        <div v-if="marketplaceLoading" class="flex flex-1 flex-col items-center justify-center gap-4">
+          <div class="h-10 w-10 animate-spin rounded-full border-4 border-border border-t-accent" />
+          <span class="text-sm text-secondary">{{ t('pages.scripts.marketplace.loadingScripts') }}</span>
+        </div>
+
+        <div v-else-if="marketplaceError" class="flex flex-1 flex-col items-center justify-center gap-4">
+          <XCircleIcon :size="48" class="text-danger" />
+          <span class="text-sm text-danger">{{ t('pages.scripts.marketplace.loadFailed') }}</span>
+          <CustomButton
+            type="primary"
+            :icon="RefreshCwIcon"
+            :text="t('pages.scripts.marketplace.retry')"
+            @click="fetchMarketplaceScripts"
+          />
+        </div>
+
+        <div v-else class="flex-1 overflow-hidden rounded-lg border border-border">
+          <div class="no-scrollbar h-full overflow-auto p-4">
+            <div
+              v-if="filteredMarketplaceScripts.length === 0"
+              class="flex h-full flex-col items-center justify-center gap-4"
+            >
+              <PackageIcon :size="48" class="text-secondary opacity-50" />
+              <span class="text-sm text-secondary">{{ t('pages.scripts.marketplace.noScriptsFound') }}</span>
+            </div>
+            <div
+              v-else-if="!scriptContentOfMarketplaceVisible"
+              class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4"
+            >
+              <div
+                v-for="script in filteredMarketplaceScripts"
+                :key="script.downloadUrl"
+                class="flex flex-col gap-3 rounded-xl border border-border-secondary p-4 transition-all hover:border-accent hover:shadow-md"
+              >
+                <div class="flex items-start justify-between">
+                  <div class="flex items-center gap-2">
+                    <FileCode :size="20" class="text-accent" />
+                    <span class="font-semibold text-main">{{ script.name }}</span>
+                  </div>
+                  <span class="rounded bg-bg-tertiary px-2 py-0.5 text-xs text-secondary">v{{ script.version }}</span>
+                </div>
+                <p class="line-clamp-2 min-h-[40px] text-sm text-secondary">{{ script.description || '-' }}</p>
+                <div class="flex items-center gap-2 text-xs text-tertiary">
+                  <UserIcon :size="12" />
+                  <span>{{ script.author }}</span>
+                  <span class="mx-1">•</span>
+                  <span class="rounded bg-gray-400 px-1.5 py-0.5 text-white">
+                    {{ supportedScriptCategories.find(cat => cat.type === script.category)?.name || script.category }}
+                  </span>
+                </div>
+                <div class="mt-auto flex gap-2 pt-2">
+                  <button
+                    class="flex w-full items-center justify-center gap-2 rounded-lg border border-border bg-accent/20 px-4 py-2 text-sm font-semibold text-accent"
+                    @click="openScriptDetails(script.content || '')"
+                  >
+                    <Edit2Icon :size="16" />
+                    {{ t('pages.scripts.marketplace.showScriptCode') }}
+                  </button>
+                  <button
+                    v-if="!isScriptDownloaded(script)"
+                    class="flex w-full items-center justify-center gap-2 rounded-lg bg-success/90 px-4 py-2 text-sm font-semibold text-white transition-all hover:bg-success disabled:opacity-50"
+                    :disabled="downloadingScripts.has(script.downloadUrl)"
+                    @click="downloadMarketplaceScript(script)"
+                  >
+                    <template v-if="downloadingScripts.has(script.downloadUrl)">
+                      <div class="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+                      {{ t('pages.scripts.marketplace.downloading') }}
+                    </template>
+                    <template v-else>
+                      <DownloadIcon :size="16" />
+                      {{ t('pages.scripts.marketplace.download') }}
+                    </template>
+                  </button>
+                  <button
+                    v-if="isScriptDownloaded(script)"
+                    class="flex w-full items-center justify-center gap-2 rounded-lg border border-success bg-success/20 px-4 py-2 text-sm font-semibold text-success"
+                    disabled
+                  >
+                    <CheckIcon :size="16" />
+                    {{ t('pages.scripts.marketplace.downloaded') }}
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div v-else class="flex h-full flex-col gap-4">
+              <Editor v-model="marketplaceScriptContent" language="javascript" :read-only="true" />
+              <CustomButton
+                class="mt-4"
+                type="primary"
+                :text="t('common.cancel')"
+                @click="
+                  () => {
+                    scriptContentOfMarketplaceVisible = false
+                    marketplaceScriptContent = ''
+                  }
+                "
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </CustomModal>
+
+    <CustomModal
+      v-if="shareDialogVisible"
+      v-model:visible="shareDialogVisible"
+      :title="t('pages.scripts.marketplace.shareScript')"
+      height="auto"
+      width="500px"
+    >
+      <div class="flex flex-col gap-4 p-6">
+        <div v-if="!githubAuth.isAuthenticated" class="flex flex-col items-center gap-4 py-8">
+          <svg width="48" height="48" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <title>GitHub</title>
+            <path
+              d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+            />
+          </svg>
+          <p class="text-center text-sm text-secondary">{{ t('pages.scripts.marketplace.loginRequired') }}</p>
+          <CustomButton
+            type="primary"
+            :icon="null"
+            :text="t('pages.scripts.marketplace.loginWithGitHub')"
+            @click="handleGitHubLogin"
+          >
+            <template #icon>
+              <svg width="18" height="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <title>GitHub</title>
+                <path
+                  d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+                />
+              </svg>
+            </template>
+          </CustomButton>
+        </div>
+        <template v-else>
+          <SettingCard class="w-full">
+            <CustomInput
+              v-model="shareMetadata.name"
+              :title="t('pages.scripts.marketplace.scriptName')"
+              :placeholder="t('pages.scripts.marketplace.scriptName')"
+            />
+          </SettingCard>
+          <SettingCard class="w-full">
+            <CustomInput
+              v-model="shareMetadata.author"
+              :title="t('pages.scripts.marketplace.scriptAuthor')"
+              :placeholder="t('pages.scripts.marketplace.scriptAuthor')"
+            />
+          </SettingCard>
+          <SettingCard class="w-full">
+            <CustomInput
+              v-model="shareMetadata.description"
+              :title="t('pages.scripts.marketplace.scriptDescription')"
+              :placeholder="t('pages.scripts.marketplace.scriptDescription')"
+            />
+          </SettingCard>
+          <SettingCard class="w-full">
+            <CustomInput
+              v-model="shareMetadata.version"
+              :title="t('pages.scripts.marketplace.scriptVersion')"
+              :placeholder="t('pages.scripts.marketplace.scriptVersion')"
+            />
+          </SettingCard>
+        </template>
+      </div>
+      <template #footer>
+        <CustomButton type="secondary" :text="t('common.cancel')" @click="shareDialogVisible = false" />
+        <CustomButton
+          v-if="githubAuth.isAuthenticated"
+          type="primary"
+          :text="sharingScript ? t('pages.scripts.marketplace.sharing') : t('pages.scripts.marketplace.share')"
+          :disabled="sharingScript"
+          @click="handleShareScript"
+        />
+      </template>
+    </CustomModal>
+
+    <CustomModal
+      v-if="deviceFlowDialogVisible"
+      v-model:visible="deviceFlowDialogVisible"
+      :title="t('pages.scripts.marketplace.loginWithGitHub')"
+      width="500px"
+      height="auto"
+    >
+      <div class="flex flex-col items-center gap-6 p-6">
+        <svg width="48" height="48" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <title>GitHub</title>
+          <path
+            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+          />
+        </svg>
+        <p class="text-center text-secondary">
+          {{ t('pages.scripts.marketplace.deviceFlowInstructions') }}
+        </p>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-sm text-secondary">{{ t('pages.scripts.marketplace.yourCode') }}</span>
+          <div class="flex items-center gap-2">
+            <code class="rounded-lg bg-bg-tertiary px-6 py-3 text-2xl font-bold tracking-widest text-accent">
+              {{ deviceFlowState.userCode }}
+            </code>
+            <button
+              class="rounded-lg bg-bg-secondary p-2 transition-colors hover:bg-bg-tertiary"
+              :title="t('pages.scripts.marketplace.copyCode')"
+              @click="copyUserCode"
+            >
+              <CheckIcon v-if="false" :size="20" class="text-success" />
+              <svg
+                v-else
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="text-secondary"
+              >
+                <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="h-5 w-5 animate-spin rounded-full border-2 border-border border-t-accent" />
+          <span class="text-sm text-secondary">{{ t('pages.scripts.marketplace.waitingForAuth') }}</span>
+        </div>
+      </div>
+      <template #footer>
+        <CustomButton type="secondary" :text="t('common.cancel')" @click="cancelDeviceFlow" />
+      </template>
+    </CustomModal>
   </div>
 </template>
 
@@ -214,14 +525,25 @@
 import dayjs from 'dayjs'
 import {
   CheckCircle2,
+  CheckIcon,
   Clock,
+  DownloadIcon,
   Edit2Icon,
+  ExternalLinkIcon,
   FileCode,
   FolderOpen,
+  LogOutIcon,
+  PackageIcon,
   Pencil,
   Play,
   Plus,
+  RefreshCwIcon,
+  SearchIcon,
+  Share2Icon,
+  StoreIcon,
   Trash2,
+  UserIcon,
+  XCircleIcon,
   XIcon,
 } from 'lucide-vue-next'
 import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
@@ -255,6 +577,81 @@ const newScriptNameVisible = ref(false)
 const newScriptName = ref('')
 const newScriptCategory = ref('manualTrigger')
 
+// Marketplace related state
+interface IScriptMeta {
+  name: string
+  author: string
+  description: string
+  version: string
+  fileName: string
+  category: string
+  content: string | null
+  downloadUrl: string
+}
+
+interface IGitHubAuth {
+  isAuthenticated: boolean
+  username: string | null
+}
+
+interface IDeviceFlowState {
+  isActive: boolean
+  userCode: string | null
+  verificationUri: string | null
+  expiresAt: number | null
+  pollingInterval: NodeJS.Timeout | null
+}
+
+const marketplaceVisible = ref(false)
+const marketplaceLoading = ref(false)
+const marketplaceError = ref(false)
+const marketplaceScripts = ref<IScriptMeta[]>([])
+const marketplaceSearch = ref('')
+const marketplaceScriptContent = ref('')
+const marketplaceCategoryFilter = ref<string[]>([])
+const downloadingScripts = ref<Set<string>>(new Set())
+const githubAuth = ref<IGitHubAuth>({ isAuthenticated: false, username: null })
+
+// Device Flow state
+const deviceFlowState = ref<IDeviceFlowState>({
+  isActive: false,
+  userCode: null,
+  verificationUri: null,
+  expiresAt: null,
+  pollingInterval: null,
+})
+const deviceFlowDialogVisible = ref(false)
+const scriptContentOfMarketplaceVisible = ref(false)
+const shareDialogVisible = ref(false)
+const sharingScript = ref(false)
+const scriptToShare = ref<IStringKeyMap | null>(null)
+const shareMetadata = ref({
+  name: '',
+  author: '',
+  description: '',
+  version: '1.0.0',
+})
+
+const filteredMarketplaceScripts = computed(() => {
+  let scripts = marketplaceScripts.value
+
+  if (marketplaceSearch.value) {
+    const search = marketplaceSearch.value.toLowerCase()
+    scripts = scripts.filter(
+      s =>
+        s.name.toLowerCase().includes(search) ||
+        s.description.toLowerCase().includes(search) ||
+        s.author.toLowerCase().includes(search),
+    )
+  }
+
+  if (marketplaceCategoryFilter.value.length > 0) {
+    scripts = scripts.filter(s => marketplaceCategoryFilter.value.includes(s.category))
+  }
+
+  return scripts
+})
+
 const supportedScriptCategories = [
   { type: 'onSoftwareOpen', name: t('pages.scripts.scriptsTypes.onSoftwareOpen') },
   { type: 'onSoftwareClose', name: t('pages.scripts.scriptsTypes.onSoftwareClose') },
@@ -437,11 +834,240 @@ async function toggleScript(scriptPath: string[]) {
   await getScriptsMap()
 }
 
+function openScriptDetails(content: string) {
+  marketplaceScriptContent.value = content
+  scriptContentOfMarketplaceVisible.value = true
+}
+
+async function openMarketplace() {
+  marketplaceVisible.value = true
+  await checkGitHubAuth()
+  await fetchMarketplaceScripts()
+}
+
+async function fetchMarketplaceScripts() {
+  marketplaceLoading.value = true
+  marketplaceError.value = false
+
+  try {
+    const scripts = await window.electron.triggerRPC<IScriptMeta[]>(IRPCActionType.SCRIPT_MARKETPLACE_FETCH_LIST)
+    marketplaceScripts.value = scripts || []
+    console.log('Fetched marketplace scripts:', marketplaceScripts.value)
+  } catch (error) {
+    console.error('Failed to fetch marketplace scripts:', error)
+    marketplaceError.value = true
+  } finally {
+    marketplaceLoading.value = false
+  }
+}
+
+function isScriptDownloaded(script: IScriptMeta): boolean {
+  const categoryPath = script.category.replace(/\./g, '/')
+  const scriptPath = `${categoryPath}/${script.fileName}`
+  const isDownloaded = existingPathsSet.value.has(scriptPath)
+  return isDownloaded
+}
+
+async function downloadMarketplaceScript(script: IScriptMeta) {
+  downloadingScripts.value.add(script.downloadUrl)
+
+  try {
+    const result = await window.electron.triggerRPC<boolean>(
+      IRPCActionType.SCRIPT_MARKETPLACE_DOWNLOAD,
+      getRawData(script),
+    )
+    if (result) {
+      message.success(t('pages.scripts.marketplace.downloadSuccess'))
+      await getScriptsMap()
+    } else {
+      message.error(t('pages.scripts.marketplace.downloadFailed'))
+    }
+  } catch (error) {
+    console.error('Failed to download script:', error)
+    message.error(t('pages.scripts.marketplace.downloadFailed'))
+  } finally {
+    downloadingScripts.value.delete(script.downloadUrl)
+  }
+}
+
+async function checkGitHubAuth() {
+  try {
+    const auth = await window.electron.triggerRPC<IGitHubAuth>(IRPCActionType.SCRIPT_MARKETPLACE_CHECK_GITHUB_AUTH)
+    if (auth) {
+      githubAuth.value = auth
+    }
+  } catch (error) {
+    console.error('Failed to check GitHub auth:', error)
+  }
+}
+
+async function handleGitHubLogin() {
+  try {
+    const result = await window.electron.triggerRPC<{
+      userCode: string
+      verificationUri: string
+      expiresIn: number
+    } | null>(IRPCActionType.SCRIPT_MARKETPLACE_GITHUB_LOGIN)
+
+    if (result) {
+      deviceFlowState.value = {
+        isActive: true,
+        userCode: result.userCode,
+        verificationUri: result.verificationUri,
+        expiresAt: Date.now() + result.expiresIn * 1000,
+        pollingInterval: null,
+      }
+      deviceFlowDialogVisible.value = true
+
+      startDeviceFlowPolling()
+    } else {
+      message.error(t('pages.scripts.marketplace.loginFailed'))
+    }
+  } catch (error) {
+    console.error('Failed to initiate GitHub login:', error)
+    message.error(t('pages.scripts.marketplace.loginFailed'))
+  }
+}
+
+function startDeviceFlowPolling() {
+  if (deviceFlowState.value.pollingInterval) {
+    clearInterval(deviceFlowState.value.pollingInterval)
+  }
+
+  const poll = async () => {
+    if (deviceFlowState.value.expiresAt && Date.now() > deviceFlowState.value.expiresAt) {
+      stopDeviceFlowPolling()
+      message.error(t('pages.scripts.marketplace.deviceCodeExpired'))
+      deviceFlowDialogVisible.value = false
+      return
+    }
+
+    try {
+      const result = await window.electron.triggerRPC<{
+        success: boolean
+        username?: string
+        error?: string
+        nextInterval?: number
+      }>(IRPCActionType.SCRIPT_MARKETPLACE_GITHUB_POLL)
+
+      if (result?.success) {
+        stopDeviceFlowPolling()
+        githubAuth.value = { isAuthenticated: true, username: result.username || null }
+        deviceFlowDialogVisible.value = false
+        message.success(t('pages.scripts.marketplace.loginSuccess'))
+        return
+      }
+
+      if (result?.error === 'authorization_pending' || result?.error === 'slow_down') {
+        const delay = (result.nextInterval || 5) * 1000
+        deviceFlowState.value.pollingInterval = setTimeout(poll, delay)
+      } else {
+        stopDeviceFlowPolling()
+        deviceFlowDialogVisible.value = false
+        message.error(`${t('pages.scripts.marketplace.loginFailed')}: ${result?.error}`)
+      }
+    } catch (error) {
+      console.error('Failed to poll device flow:', error)
+      deviceFlowState.value.pollingInterval = setTimeout(poll, 5000)
+    }
+  }
+
+  poll()
+}
+
+function stopDeviceFlowPolling() {
+  if (deviceFlowState.value.pollingInterval) {
+    clearInterval(deviceFlowState.value.pollingInterval)
+    deviceFlowState.value.pollingInterval = null
+  }
+  deviceFlowState.value.isActive = false
+}
+
+async function cancelDeviceFlow() {
+  stopDeviceFlowPolling()
+  await window.electron.triggerRPC(IRPCActionType.SCRIPT_MARKETPLACE_GITHUB_CANCEL)
+  deviceFlowDialogVisible.value = false
+}
+
+function copyUserCode() {
+  if (deviceFlowState.value.userCode) {
+    window.electron.clipboard.writeText(deviceFlowState.value.userCode)
+    message.success(t('pages.scripts.marketplace.codeCopied'))
+  }
+}
+
+async function handleGitHubLogout() {
+  try {
+    await window.electron.triggerRPC(IRPCActionType.SCRIPT_MARKETPLACE_GITHUB_LOGOUT)
+    githubAuth.value = { isAuthenticated: false, username: null }
+    message.success(t('pages.scripts.marketplace.logoutSuccess'))
+  } catch (error) {
+    console.error('Failed to logout:', error)
+  }
+}
+
+function openMarketplaceRepo() {
+  window.electron.sendRPC(IRPCActionType.OPEN_URL, 'https://github.com/Kuingsmile/piclist-ScriptsHub')
+}
+
+function openShareDialog(script: IStringKeyMap) {
+  scriptToShare.value = script
+  shareMetadata.value = {
+    name: script.fileName.replace('.js', ''),
+    author: githubAuth.value.username || '',
+    description: '',
+    version: '1.0.0',
+  }
+  shareDialogVisible.value = true
+}
+
+async function handleShareScript() {
+  if (!scriptToShare.value) return
+
+  if (
+    !shareMetadata.value.name ||
+    !shareMetadata.value.author ||
+    !shareMetadata.value.description ||
+    !shareMetadata.value.version
+  ) {
+    message.error(t('pages.scripts.marketplace.metadataRequired'))
+    return
+  }
+
+  sharingScript.value = true
+
+  try {
+    const result = await window.electron.triggerRPC<{ success: boolean; prUrl?: string; error?: string }>(
+      IRPCActionType.SCRIPT_MARKETPLACE_SHARE,
+      getRawData(scriptToShare.value.filePath),
+      getRawData(shareMetadata.value),
+    )
+
+    if (result?.success) {
+      message.success(t('pages.scripts.marketplace.shareSuccess'))
+      shareDialogVisible.value = false
+      if (result.prUrl) {
+        window.electron.sendRPC(IRPCActionType.OPEN_URL, result.prUrl)
+      }
+    } else {
+      message.error(`${t('pages.scripts.marketplace.shareFailed')}: ${result?.error || 'Unknown error'}`)
+    }
+  } catch (error) {
+    console.error('Failed to share script:', error)
+    message.error(t('pages.scripts.marketplace.shareFailed'))
+  } finally {
+    sharingScript.value = false
+  }
+}
+
 onBeforeMount(async () => {
   getScriptsMap()
+  await checkGitHubAuth()
 })
 
-onBeforeUnmount(() => {})
+onBeforeUnmount(() => {
+  stopDeviceFlowPolling()
+})
 </script>
 
 <script lang="ts">

src/renderer/utils/configPaths.ts

@@ -95,6 +95,8 @@ export interface IConfigStruct {
   uploader: IUploaderConfig
   scripts: {
     disabledList: string[]
+    githubToken?: string
+    githubUsername?: string
   }
   buildIn: {
     compress: IBuildInCompressOptions
@@ -198,6 +200,8 @@ export const configPaths = {
   uploader: 'uploader',
   scripts: {
     disabledList: 'scripts.disabledList',
+    githubToken: 'scripts.githubToken',
+    githubUsername: 'scripts.githubUsername',
   },
   buildIn: {
     _name: 'buildIn',

src/renderer/utils/enum.ts

@@ -82,6 +82,16 @@ export const IRPCActionType = {
   WRITE_SCRIPT_FILE: 'WRITE_SCRIPT_FILE',
   DELETE_SCRIPTS_FILE: 'DELETE_SCRIPTS_FILE',
 
+  // script marketplace rpc
+  SCRIPT_MARKETPLACE_FETCH_LIST: 'SCRIPT_MARKETPLACE_FETCH_LIST',
+  SCRIPT_MARKETPLACE_DOWNLOAD: 'SCRIPT_MARKETPLACE_DOWNLOAD',
+  SCRIPT_MARKETPLACE_SHARE: 'SCRIPT_MARKETPLACE_SHARE',
+  SCRIPT_MARKETPLACE_CHECK_GITHUB_AUTH: 'SCRIPT_MARKETPLACE_CHECK_GITHUB_AUTH',
+  SCRIPT_MARKETPLACE_GITHUB_LOGIN: 'SCRIPT_MARKETPLACE_GITHUB_LOGIN',
+  SCRIPT_MARKETPLACE_GITHUB_POLL: 'SCRIPT_MARKETPLACE_GITHUB_POLL',
+  SCRIPT_MARKETPLACE_GITHUB_CANCEL: 'SCRIPT_MARKETPLACE_GITHUB_CANCEL',
+  SCRIPT_MARKETPLACE_GITHUB_LOGOUT: 'SCRIPT_MARKETPLACE_GITHUB_LOGOUT',
+
   // shortkey setting rpc
   SHORTKEY_UPDATE: 'SHORTKEY_UPDATE',
   SHORTKEY_BIND_OR_UNBIND: 'SHORTKEY_BIND_OR_UNBIND',