custom theme, css style hack

Former-commit-id: 555193b818d77447342d326b6c5d6d7ef2e3e16f
2026-01-26 19:29:56 +00:00 · 2023-05-19 18:30:12 +08:00
parent dc25df1d3c
commit 76beeeb829
79 changed files with 598 additions and 790 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,5 @@
 /storage
 /tests/tested.json
 /tags/*
+/styles/extensions/demo
 __pycache__
--- a/i18n.json.REMOVED.git-id
+++ b/i18n.json.REMOVED.git-id
@@ -1 +1 @@
-8f0029951d020921489735c9e3a75e1def63be34
+3ea76cc670268c82561eafa84165305517118d4e
--- a/javascript/main.entry.js.REMOVED.git-id
+++ b/javascript/main.entry.js.REMOVED.git-id
@@ -1 +1 @@
-93fdb60005d73f9a885338934a50c62505927e66
+e3cfcaed2ef7497832d8b919833b8556ecac8c12
--- a/javascript/main.entry.js.map.REMOVED.git-id
+++ b/javascript/main.entry.js.map.REMOVED.git-id
@@ -1 +1 @@
-ea283d0443909de3d05c938167d0679b8a3ceba9
+07a37828c4ae6ddbeb59198dd646dc3878eb62a2
--- a/scripts/on_app_started.py
+++ b/scripts/on_app_started.py
@@ -12,6 +12,7 @@ from scripts.get_translate_apis import get_translate_apis
 from scripts.translate import translate
 from scripts.history import history
 from scripts.csv import get_csvs, get_csv
+from scripts.styles import getStyleFullPath, getExtensionCssList

 VERSION = '0.0.1'

@@ -197,15 +198,17 @@ def on_app_started(_: gr.Blocks, app: FastAPI):
            return Response(status_code=404)
        return FileResponse(file, media_type='text/csv', filename=os.path.basename(file))

-    @app.get("/physton_prompt/theme")
-    async def _theme(file: str):
-        theme_path = os.path.dirname(os.path.abspath(__file__)) + '/../theme'
-        theme_path = os.path.normpath(theme_path)
-        file_path = os.path.join(theme_path, file)
+    @app.get("/physton_prompt/styles")
+    async def _styles(file: str):
+        file_path = getStyleFullPath(file)
        if not os.path.exists(file_path):
            return Response(status_code=404)
        return FileResponse(file_path, filename=os.path.basename(file_path))

+    @app.get("/physton_prompt/get_extension_css_list")
+    async def _get_extension_css_list():
+        return {"css_list": getExtensionCssList()}
+
 try:
    script_callbacks.on_app_started(on_app_started)
    print('sd-webui-prompt-all-in-one background API service started successfully.')
--- a/scripts/styles.py
+++ b/scripts/styles.py
@@ -0,0 +1,50 @@
+import os
+from scripts.storage import storage
+storage = storage()
+
+styles_path = os.path.dirname(os.path.abspath(__file__)) + '/../styles'
+styles_path = os.path.normpath(styles_path)
+
+def getStyleFullPath(file):
+    global styles_path
+    return os.path.join(styles_path, file)
+
+def getExtensionCssList():
+    global styles_path
+    extension_path = os.path.join(styles_path, 'extensions')
+    if not os.path.exists(extension_path):
+        return []
+    css_list = []
+    # 扫描下面的每个文件夹
+    for dir in os.listdir(extension_path):
+        dir_path = os.path.join(extension_path, dir)
+        if not os.path.isdir(dir_path):
+            continue
+
+        # 是否有 manifest.json 文件
+        manifest_path = os.path.join(dir_path, 'manifest.json')
+        if not os.path.exists(manifest_path):
+            continue
+
+        # 是否有 style.min.css 文件
+        style_path = os.path.join(dir_path, 'style.min.css')
+        if not os.path.exists(style_path):
+            continue
+
+        manifest = None
+        with open(manifest_path, 'r') as f:
+            manifest = f.read()
+        if not manifest:
+            continue
+
+        css_item = {
+            'dir': dir,
+            'dataName': 'extensionSelect.' + dir,
+            'selected': False,
+            'manifest': manifest,
+            'style': f'extensions/{dir}/style.min.css',
+        }
+        css_item['selected'] = storage.get(css_item['dataName'])
+        css_list.append(css_item)
+
+    return css_list
--- a/src/src/App.vue
+++ b/src/src/App.vue
@@ -20,7 +20,8 @@
                            :translate-api-config="translateApiConfig"
                            @click:translate-api="onTranslateApiClick"
                            v-model:tag-complete-file="tagCompleteFile"
-                            @click:select-language="onSelectLanguageClick"></physton-prompt>
+                            @click:select-language="onSelectLanguageClick"
+                            @click:select-theme="onSelectThemeClick"></physton-prompt>
        </template>
        <translate-setting ref="translateSetting" v-model:language-code="languageCode"
                           :translate-apis="translateApis" :languages="languages"
@@ -38,18 +39,20 @@
        <favorite ref="favorite" v-model:language-code="languageCode"
                  :translate-apis="translateApis" :languages="languages"
                  v-model:tag-complete-file="tagCompleteFile" @use="onUseFavorite"></favorite>
+        <extension-css ref="extensionCss" v-model:language-code="languageCode"
+                       :translate-apis="translateApis" :languages="languages"/>

        <div class="physton-paste-popup" v-if="showPastePopup" @click="closePastePopup">
            <div class="paste-popup-main" @click.stop>
                <div class="paste-popup-close" @click="closePastePopup">
-                    <icon-close width="24" height="24"></icon-close>
+                    <icon-svg name="close"/>
                </div>
                <div class="paste-popup-title">{{ pasteTitle }}</div>
                <div class="paste-popup-body">
                    <textarea class="paste-content" v-model="pasteContent" :placeholder="getLang('please_enter_the_content_here')"></textarea>
                    <div v-if="!pasteLoading" class="paste-submit" @click="onClickPasteSubmit">Submit</div>
                    <div v-else class="paste-submit">
-                        <icon-loading width="24" height="24"></icon-loading>
+                        <icon-svg name="loading"/>
                    </div>
                </div>
            </div>
@@ -61,20 +64,20 @@
 import PhystonPrompt from "./components/phystonPrompt.vue"
 import TranslateSetting from "@/components/translateSetting.vue";
 import common from "@/utils/common";
-import IconClose from "@/components/icons/iconClose.vue";
-import IconLoading from "@/components/icons/iconLoading.vue";
 import SelectLanguage from "@/components/selectLanguage.vue";
 import Favorite from "@/components/favorite.vue";
 import History from "@/components/history.vue";
+import IconSvg from "@/components/iconSvg.vue";
+import ExtensionCss from "@/components/extensionCss.vue";

 export default {
    name: 'App',
    components: {
+        ExtensionCss,
+        IconSvg,
        History,
        Favorite,
        SelectLanguage,
-        IconLoading,
-        IconClose,
        TranslateSetting,
        PhystonPrompt,
    },
@@ -260,6 +263,7 @@ export default {
        },
    },
    mounted() {
+        common.loadCSS('main.min.css', 'physton-prompt-main', true)
        this.gradioAPI.getConfig().then(res => {
            console.log('config:', res)
            this.languageCode = res.i18n.default
@@ -335,6 +339,7 @@ export default {
                }

                this.updateTranslateApiConfig()
+                this.$refs.extensionCss.init()

                this.prompts.forEach(item => {
                    if (data[item.hideDefaultInputKey] !== null) {
@@ -400,6 +405,9 @@ export default {
        onTranslateApiClick() {
            this.$refs.translateSetting.open(this.translateApi)
        },
+        onSelectThemeClick() {
+            this.$refs.extensionCss.open()
+        },
        handlePaste() {
            if (typeof gradioApp !== 'function') return
            const $pastes = gradioApp().querySelectorAll("#paste")
@@ -526,5 +534,6 @@ export default {
 </script>

 <style lang="less">
-@import "@/main.less";
+@import "toastr/build/toastr.min.css";
+@import "tippy.js/dist/tippy.css";
 </style>
--- a/src/src/components/extensionCss.vue
+++ b/src/src/components/extensionCss.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="physton-prompt-extension-css" v-if="isOpen" @click="close">
+        <div class="extension-main" @click.stop>
+            <div class="extension-close" @click="close">
+                <icon-svg name="close"/>
+            </div>
+            <div class="extension-list" @click.stop>
+                <div v-for="(item, index) in list" :key="item.dir" class="extension-item" ref="items">
+                    <input class="extension-checkbox" type="checkbox" name="extension-item" :checked="item.selected"
+                           @change="onChangeSelect(item.id)">
+                    <div class="extension-dir">[{{ item.dir }}]</div>
+                    <div class="extension-name">{{ getName(item) }}</div>
+                    <div class="extension-author" v-if="item.manifest.author">By: {{ item.manifest.author }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import LanguageMixin from "@/mixins/languageMixin";
+import IconSvg from "@/components/iconSvg.vue";
+import common from "@/utils/common";
+
+export default {
+    name: 'ExtensionCss',
+    components: {IconSvg},
+    mixins: [LanguageMixin],
+    props: {},
+    data() {
+        return {
+            isOpen: false,
+            list: [],
+        }
+    },
+    computed: {},
+    mounted() {
+    },
+    methods: {
+        init() {
+            this.refresh(true)
+        },
+        refresh(init = false) {
+            this.gradioAPI.getExtensionCssList().then(res => {
+                let list = []
+                for (let i = 0; i < res.length; i++) {
+                    res[i].manifest = JSON.parse(res[i].manifest)
+                    if (!res[i].manifest) continue
+                    if (typeof res[i].manifest !== 'object') continue
+                    if (!res[i].manifest.name) continue
+                    res[i].selected = res[i].selected || false
+                    res[i].id = 'physton-prompt-extension-' + res[i].dir
+                    list.push(res[i])
+                }
+                this.list = list
+                if (init) {
+                    this.list.forEach(item => {
+                        if (item.selected) {
+                            common.loadCSS(item.style, item.id, true, false)
+                        }
+                    })
+                }
+            })
+        },
+        getName(item) {
+            if (!item) return ''
+            let name = item.manifest.name
+            if (item.manifest.i18n && item.manifest.i18n[this.languageCode]) {
+                name = item.manifest.i18n[this.languageCode]
+            }
+            return name
+        },
+        onChangeSelect(id) {
+            let item = this.list.find(item => item.id === id)
+            if (!item) return
+            item.selected = !item.selected
+            if (item.selected) {
+                common.loadCSS(item.style, item.id, true, false)
+            } else {
+                common.removeCSS(item.id)
+            }
+            this.gradioAPI.setData(item.dataName, item.selected)
+        },
+        open() {
+            this.isOpen = true
+            this.refresh(false)
+        },
+        close() {
+            this.isOpen = false
+        }
+    },
+}
+</script>
--- a/src/src/components/favorite.vue
+++ b/src/src/components/favorite.vue
@@ -37,19 +37,19 @@
                        <div class="item-header-right">
                            <div class="header-btn-favorite hover-scale-140" @click="onFavoriteClick(index)"
                                 v-show="item.is_favorite" v-tooltip="getLang('remove_from_favorite')">
-                                <icon-favorite-state :is-favorite="true" width="20" height="20"/>
+                                <icon-svg name="favorite-yes"/>
                            </div>
                            <div class="header-btn-favorite hover-scale-140" @click="onFavoriteClick(index)"
                                 v-show="!item.is_favorite" v-tooltip="getLang('add_to_favorite')">
-                                <icon-favorite-state :is-favorite="false" width="20" height="20"/>
+                                <icon-svg name="favorite-no"/>
                            </div>
                            <div class="header-btn-copy hover-scale-140" @click="onCopyClick(index)"
                                 v-tooltip="getLang('copy_to_clipboard')">
-                                <icon-copy width="20" height="20" color="#fff"/>
+                                <icon-svg name="copy"/>
                            </div>
                            <div class="header-btn-use hover-scale-140" @click="onUseClick(index)"
                                 v-tooltip="getLang('use')">
-                                <icon-use width="20" height="20" color="#fff"/>
+                                <icon-svg name="use"/>
                            </div>
                        </div>
                    </div>
@@ -57,23 +57,20 @@
                </div>
            </div>
            <div class="content-empty" v-show="group.list.length === 0">
-                <icon-loading width="64" height="64" v-if="loading"/>
+                <icon-svg name="loading" v-if="loading"/>
                <span v-else>{{ emptyMsg }}</span>
            </div>
        </div>
    </div>
 </template>
 <script>
-import IconFavoriteState from "@/components/icons/iconFavoriteState.vue";
 import common from "@/utils/common";
-import IconLoading from "@/components/icons/iconLoading.vue";
-import IconCopy from "@/components/icons/iconCopy.vue";

 import LanguageMixin from "@/mixins/languageMixin";
-import IconUse from "@/components/icons/iconUse.vue";
+import IconSvg from "@/components/iconSvg.vue";

 export default {
-    components: {IconUse, IconCopy, IconLoading, IconFavoriteState},
+    components: {IconSvg},
    props: {},
    mixins: [LanguageMixin],
    data() {
--- a/src/src/components/history.vue
+++ b/src/src/components/history.vue
@@ -23,7 +23,7 @@
        <div v-for="(group) in histories" :key="group.key" :class="['popup-tab-content', group.key === historyKey ? 'active': '']">
            <div class="content-list" v-show="group.list.length > 0">
                <div class="clear-btn" @click="onDeleteAllHistoryClick">
-                    <icon-remove width="18" height="18" color="#ff4a4a"></icon-remove>
+                    <icon-svg name="remove"/>
                    {{ getLang('delete_all_history') }}
                </div>
                <div class="content-item" v-for="(item, index) in group.list" :key="item.id"
@@ -41,19 +41,19 @@
                        <div class="item-header-right">
                            <div class="header-btn-favorite hover-scale-140" @click="onFavoriteClick(index)"
                                 v-show="item.is_favorite" v-tooltip="getLang('remove_from_favorite')">
-                                <icon-favorite-state :is-favorite="true" width="20" height="20"/>
+                                <icon-svg name="favorite-yes"/>
                            </div>
                            <div class="header-btn-favorite hover-scale-140" @click="onFavoriteClick(index)"
                                 v-show="!item.is_favorite" v-tooltip="getLang('add_to_favorite')">
-                                <icon-favorite-state :is-favorite="false" width="20" height="20"/>
+                                <icon-svg name="favorite-no"/>
                            </div>
                            <div class="header-btn-copy hover-scale-140" @click="onCopyClick(index)"
                                 v-tooltip="getLang('copy_to_clipboard')">
-                                <icon-copy width="20" height="20" color="#fff"/>
+                                <icon-svg name="copy"/>
                            </div>
                            <div class="header-btn-use hover-scale-140" @click="onUseClick(index)"
                                 v-tooltip="getLang('use')">
-                                <icon-use width="20" height="20" color="#fff"/>
+                                <icon-svg name="use"/>
                            </div>
                        </div>
                    </div>
@@ -61,24 +61,20 @@
                </div>
            </div>
            <div class="content-empty" v-show="group.list.length === 0">
-                <icon-loading width="64" height="64" v-if="loading"/>
+                <icon-svg name="loading" v-if="loading"/>
                <span v-else>{{ emptyMsg }}</span>
            </div>
        </div>
    </div>
 </template>
 <script>
-import IconFavoriteState from "@/components/icons/iconFavoriteState.vue";
 import common from "@/utils/common";
-import IconLoading from "@/components/icons/iconLoading.vue";
-import IconCopy from "@/components/icons/iconCopy.vue";

 import LanguageMixin from "@/mixins/languageMixin";
-import IconUse from "@/components/icons/iconUse.vue";
-import IconRemove from "@/components/icons/iconRemove.vue";
+import IconSvg from "@/components/iconSvg.vue";

 export default {
-    components: {IconRemove, IconUse, IconCopy, IconLoading, IconFavoriteState},
+    components: {IconSvg},
    props: {},
    mixins: [LanguageMixin],
    data() {
--- a/src/src/components/iconSvg.vue
+++ b/src/src/components/iconSvg.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="svgCode" class="icon-svg" :style="{width: width + 'px', height: height + 'px'}" v-html="svgCode"></div>
+    <div v-show="svgCode" :class="['icon-svg', 'icon-svg-' + name]" data-name="name" v-html="svgCode"></div>
 </template>
 <script>
 export default {
@@ -9,17 +9,9 @@ export default {
            type: String,
            required: true
        },
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
+        svgName: {
            type: String,
-            default: '#02b7fd',
+            default: ''
        },
    },
    data() {
@@ -41,14 +33,45 @@ export default {
    methods: {
        getSvg() {
            if (!this.name) return
-            this.gradioAPI.theme('default/icons/' + this.name + '.svg').then(res => {
-                let parser = new DOMParser()
-                let doc = parser.parseFromString(res, 'image/svg+xml')
-                let svg = doc.getElementsByTagName('svg')[0]
-                svg.setAttribute('width', this.width)
-                svg.setAttribute('height', this.height)
-                svg.setAttribute('fill', this.color)
-                this.svgCode = svg.outerHTML
+            let name = this.svgName || this.name
+
+            window.loadingSvg = window.loadingSvg || {}
+            window.isLoadSvg = window.isLoadSvg || {}
+
+            if (window.isLoadSvg[name]) {
+                // 已经加载过了
+                this.svgCode = localStorage.getItem('iconSVG-' + name)
+                return
+            }
+
+            if (localStorage.getItem('iconSVG-' + name)) {
+                // 有缓存，先读取缓存的用用
+                this.svgCode = localStorage.getItem('iconSVG-' + name)
+            }
+
+            if (window.loadingSvg[name]) {
+                // 其他组件正在加载
+                const interval = setInterval(() => {
+                    if (!window.loadingSvg[name]) {
+                        // 其他组件加载完成
+                        clearInterval(interval)
+                        this.svgCode = localStorage.getItem('iconSVG-' + name)
+                    }
+                }, 10)
+                return
+            }
+            window.loadingSvg[name] = true
+
+            if (!window.iconSvgHash) {
+                window.iconSvgHash = new Date().getTime()
+            }
+            this.gradioAPI.styles('icons/' + name + '.svg', window.iconSvgHash).then(res => {
+                this.svgCode = res
+                localStorage.setItem('iconSVG-' + name, res)
+                window.isLoadSvg[name] = true
+                window.loadingSvg[name] = false
+            }).catch(err => {
+                window.loadingSvg[name] = false
            })
        }
    }
--- a/src/src/components/icons/iconApi.vue
+++ b/src/src/components/icons/iconApi.vue
@@ -1,27 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683802752737" viewBox="0 0 1279 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-                 p-id="43331" :width="width" :height="height" :style="{fill: color}">
-            <path d="M663.736741 915.27126l56.30961 51.702461a32.864337 32.864337 0 0 1-44.382211 48.426266l-143.333555-131.457346 135.706162-141.285933a32.864337 32.864337 0 0 1 47.402454 45.457213l-59.02271 61.479857h258.358733a265.883744 265.883744 0 0 0 265.525411-265.576601 265.730173 265.730173 0 0 0-232.353931-263.477789l-23.342893-2.917861-4.760722-23.03575a287.58854 287.58854 0 0 0-280.882577-228.719401 287.076634 287.076634 0 0 0-286.513538 297.519507l1.330954 37.72744-37.625058-3.890483a227.030113 227.030113 0 0 0-250.526578 225.545587 227.030113 227.030113 0 0 0 226.77416 226.77416h79.038218a32.864337 32.864337 0 0 1 0 65.728673H292.451643A292.707595 292.707595 0 0 1 0 622.819618 292.809977 292.809977 0 0 1 287.179015 330.367975a352.446974 352.446974 0 0 1 691.584403-71.359634 331.202893 331.202893 0 0 1-63.988194 656.262919h-251.038483z m-360.483891-250.321815l105.964449-275.917093h39.365537l112.977556 275.917093h-41.617921l-32.19886-83.542986H372.308909l-30.304809 83.594176h-38.75125z m79.652504-113.284699h93.525145L447.661406 475.237247c-8.804776-23.189322-15.357167-42.283399-19.605982-57.231041-3.583339 17.916694-8.548823 35.526245-14.845261 52.726272l-30.304809 80.881077z m207.833655 113.335889V388.981161h104.070399c18.326219 0 32.352431 0.870239 41.976255 2.661909 13.565497 2.252384 24.9298 6.552391 34.09291 12.90002 9.163109 6.296438 16.534549 15.203595 22.16551 26.619089 5.630961 11.773828 8.497632 24.622657 8.344061 37.676248 0 23.445274-7.473821 43.30721-22.421463 59.534616-14.896452 16.278597-41.873874 24.417895-80.881078 24.417895h-70.847728v112.209697h-36.498866z m36.498866-144.76689h71.308443c23.598846 0 40.338158-4.402388 50.269126-13.207163 9.930968-8.753585 14.845261-21.141699 14.896451-37.061962a49.961982 49.961982 0 0 0-8.702394-29.690523 40.952444 40.952444 0 0 0-23.086941-16.227406c-6.142867-1.638098-17.50717-2.457147-34.09291-2.457146h-70.591775v98.6442z m226.876541 144.76689V388.981161h36.498866v276.019474h-36.498866z" p-id="43332"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconApi',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconClose.vue
+++ b/src/src/components/icons/iconClose.vue
@@ -1,26 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" viewBox="0 0 24 24" :style="{fill: color}">
-            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconClose',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#000',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconCopy.vue
+++ b/src/src/components/icons/iconCopy.vue
@@ -1,28 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683034246175" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3587" :width="width" :height="height" :style="{fill: color}">
-            <path d="M96.1 575.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" p-id="3588"></path>
-            <path d="M742.1 450.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.1 26-13.8 26-31s-11.7-31.3-26-31.4zM742.1 577.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.2 26-13.8 26-31s-11.7-31.3-26-31.4z" p-id="3589"></path>
-            <path d="M736.1 63.9H417c-70.4 0-128 57.6-128 128h-64.9c-70.4 0-128 57.6-128 128v128c-0.1 17.7 14.4 32 32.2 32 17.8 0 32.2-14.4 32.2-32.1V320c0-35.2 28.8-64 64-64H289v447.8c0 70.4 57.6 128 128 128h255.1c-0.1 35.2-28.8 63.8-64 63.8H224.5c-35.2 0-64-28.8-64-64V703.5c0-17.7-14.4-32.1-32.2-32.1-17.8 0-32.3 14.4-32.3 32.1v128.3c0 70.4 57.6 128 128 128h384.1c70.4 0 128-57.6 128-128h65c70.4 0 128-57.6 128-128V255.9l-193-192z m0.1 63.4l127.7 128.3H800c-35.2 0-64-28.8-64-64v-64.3h0.2z m64 641H416.1c-35.2 0-64-28.8-64-64v-513c0-35.2 28.8-64 64-64H671V191c0 70.4 57.6 128 128 128h65.2v385.3c0 35.2-28.8 64-64 64z" p-id="3590"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconCopy',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconDisabled.vue
+++ b/src/src/components/icons/iconDisabled.vue
@@ -1,26 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683017656179" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1536" :width="width" :height="height" :style="{fill: color}">
-            <path d="M512 32A480 480 0 1 0 992 512 480.64 480.64 0 0 0 512 32zM928 512a414.08 414.08 0 0 1-100.48 270.08L241.92 196.48A415.36 415.36 0 0 1 928 512z m-832 0a414.08 414.08 0 0 1 100.48-270.08l585.6 585.6A415.36 415.36 0 0 1 96 512z" p-id="1537"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconDisabled',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#d81e06',
-        }
-    },
-}
-</script>
--- a/src/src/components/icons/iconEnable.vue
+++ b/src/src/components/icons/iconEnable.vue
@@ -1,27 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683017723924" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2069" id="mx_n_1683017723925" :width="width" :height="height" :style="{fill: color}">
-            <path d="M450.56 597.12L342.4 489.6l-44.8 44.8 147.84 148.48 342.4-273.92-39.68-49.92-297.6 238.08z" :fill="color" p-id="2070"></path>
-            <path d="M512 32A480 480 0 1 0 992 512 480.64 480.64 0 0 0 512 32z m0 896A416 416 0 1 1 928 512 416.64 416.64 0 0 1 512 928z" p-id="2071"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconEnable',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconEnglish.vue
+++ b/src/src/components/icons/iconEnglish.vue
@@ -1,27 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683125036613" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2659" :width="width" :height="height" :style="{fill: color}">
-            <path d="M229.248 704V337.504h271.744v61.984h-197.76v81.28h184v61.76h-184v99.712h204.768V704h-278.72z m550.496 0h-70.24v-135.488c0-28.672-1.504-47.232-4.48-55.648a39.04 39.04 0 0 0-14.656-19.616 41.792 41.792 0 0 0-24.384-7.008c-12.16 0-23.04 3.328-32.736 10.016-9.664 6.656-16.32 15.488-19.872 26.496-3.584 11.008-5.376 31.36-5.376 60.992V704h-70.24v-265.504h65.248v39.008c23.168-30.016 52.32-44.992 87.488-44.992 15.52 0 29.664 2.784 42.496 8.352 12.832 5.6 22.56 12.704 29.12 21.376 6.592 8.672 11.2 18.496 13.76 29.504 2.56 11.008 3.872 26.752 3.872 47.264V704z" p-id="2660"></path>
-            <path d="M160 144a32 32 0 0 0-32 32V864a32 32 0 0 0 32 32h688a32 32 0 0 0 32-32V176a32 32 0 0 0-32-32H160z m0-64h688a96 96 0 0 1 96 96V864a96 96 0 0 1-96 96H160a96 96 0 0 1-96-96V176a96 96 0 0 1 96-96z" p-id="2661"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconEnglish',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconFavorite.vue
+++ b/src/src/components/icons/iconFavorite.vue
@@ -1,27 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683129263830" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7484" :width="width" :height="height" :style="{fill: color}">
-            <path d="M814.2 1016.4c-19.6 0-39.2-4.5-57.1-13.5L530.8 889.2c-11.7-5.9-25.8-5.9-37.5 0L267 1002.9c-37.2 18.7-81.3 17.9-118.1-1.9-35.3-19-58.1-52.3-62.6-91.3-0.6-4.9-0.9-9.9-0.9-15V129.4C85.3 58 143.4 0 214.7 0h594.6c71.3 0 129.4 58 129.4 129.4v765.3c0 5.1-0.3 10.1-0.9 15-4.5 39-27.4 72.2-62.6 91.3-19 10.2-40 15.4-61 15.4zM512 799.5c19.6 0 39.2 4.5 57.1 13.5l226.3 113.7c12.3 6.2 27 5.9 39.3-0.8 6.1-3.3 16.7-11.1 18.4-26 0.2-1.7 0.3-3.4 0.3-5.2V129.4c0-24.3-19.8-44-44-44H214.7c-24.3 0-44 19.8-44 44v765.3c0 1.8 0.1 3.5 0.3 5.2 1.7 15 12.3 22.8 18.4 26 12.3 6.7 27 6.9 39.3 0.8L455 813c17.8-9.1 37.4-13.5 57-13.5z" p-id="7485"></path>
-            <path d="M597.8 590.6c-6.7 0-13.5-1.3-20-4.1L512 558.9l-65.7 27.7c-16.8 7-35.5 4.9-50.2-5.8-14.7-10.7-22.5-27.9-20.9-45.9l6-71-46.6-54c-11.9-13.7-15.6-32.2-10-49.4 5.6-17.3 19.5-30.1 37.1-34.2l69.5-16.2 36.9-61c9.4-15.5 25.9-24.8 44-24.8s34.6 9.3 44 24.8l36.9 61 69.5 16.2c17.7 4.1 31.6 16.9 37.2 34.2 5.6 17.2 1.8 35.8-10 49.5l-46.6 54 6 71c1.6 18-6.3 35.2-20.9 45.9-9.3 6.4-19.8 9.7-30.4 9.7z m-99-37.3s0.1 0 0 0z m26.4 0z m38.7-11.3c0 0.1 0 0.1 0 0z m-103.8 0z m51.9-71.3c6.8 0 13.7 1.4 20 4l27.1 11.4-2.5-29.4c-1.2-13.8 3.4-27.6 12.4-38.1l19.2-22.2-28.7-6.7c-13.4-3.2-25.1-11.7-32.2-23.3L512 341.1l-15.2 25.2c-7.2 11.8-18.9 20.3-32.1 23.4l-28.9 6.7 19.3 22.3c9 10.3 13.5 24.2 12.3 37.9l-2.5 29.4 27.2-11.4c6.3-2.6 13.1-3.9 19.9-3.9z m-121.6 3.9s0.1 0.1 0.1 0.2l-0.1-0.2z m243.3-0.2l-0.1 0.2s0-0.1 0.1-0.2z m-33.4-152.2h0.2-0.2z" p-id="7486"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconFavorite',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconFavoriteState.vue
+++ b/src/src/components/icons/iconFavoriteState.vue
@@ -1,39 +0,0 @@
-<template>
-    <div class="icon-svg icon-favorite" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683363779169" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7176"
-             data-spm-anchor-id="a313x.7781069.0.i11" :width="width" :height="height">
-            <path d="M447 134.6zM867.7 344.7l-187.3-27.2c-7.8-1.1-14.6-6-18.1-13.1l-83.7-169.7c-12.5-25.3-37.7-40.9-65.8-40.9-28.2 0-53.4 15.7-65.8 40.9l-83.7 169.7c-3.5 7.1-10.3 12-18.1 13.1l-187.3 27.2c-15.9 2.3-30.8 9.9-42 21.4l-2.7 2.9-0.3 0.3c-25.4 29.3-23.5 73.5 4.3 100.6L252.7 602c5.7 5.5 8.2 13.5 6.9 21.2l-32 186.6c-2.7 15.8-0.1 32.4 7.4 46.6l1.8 3.3 0.2 0.3c13.7 22.8 38 35.6 63 35.6 11.5 0 23.2-2.7 34.1-8.4l167.5-88.1c7-3.7 15.3-3.7 22.3 0l167.5 88.1c14.2 7.5 30.8 10.1 46.6 7.4l3.6-0.7 0.3-0.1c38-8.7 62.6-45.6 56-84l-32-186.5c-1.3-7.8 1.2-15.7 6.9-21.2L908.3 470c11.5-11.2 19.1-26.1 21.4-42l0.4-3.6v-0.4c3.7-38.9-23.8-73.7-62.4-79.3zM341.8 603.8c2.2-12.6-2-25.5-11.2-34.4l-135.5-132c-7.1-6.9-3.2-19 6.6-20.5L389 389.7c12.7-1.8 23.6-9.8 29.3-21.3L502 198.8c4.4-8.9 17.1-8.9 21.5 0l83.7 169.6c5.7 11.5 16.6 19.4 29.3 21.3l187.2 27.2c9.8 1.4 13.8 13.5 6.6 20.5l-135.5 132c-9.2 9-13.3 21.8-11.2 34.4l32 186.4c1.7 9.8-8.6 17.3-17.4 12.6l-167.4-88c-11.3-6-24.9-6-36.2 0l-167.4 88c-8.8 4.6-19.1-2.8-17.4-12.6l32-186.4z"
-                  :fill="isFavorite ? favoriteColor : unFavoriteColor" p-id="7177"
-                  data-spm-anchor-id="a313x.7781069.0.i12"></path>
-            <path d="M632.9 548.5c-3.6-13.5-14.3-24.1-27.9-27.6-13.6-3.5-28 0.6-37.7 10.7-12 12.2-28.7 19.1-45.8 19.1h-0.2c-17 0-33.6-6.9-45.6-19-15.2-15.2-39.8-15.2-55 0-15.2 15.2-15.2 39.8 0 55 26.5 26.6 63.1 41.8 100.6 41.8h0.4c37.7 0 74.5-15.4 101.1-42.2 9.8-9.8 13.7-24.3 10.1-37.8z"
-                  :fill="favoriteColor" p-id="7178" data-spm-anchor-id="a313x.7781069.0.i10"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'iconFavoriteState',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        isFavorite: {
-            type: Boolean,
-            default: false,
-        },
-        favoriteColor: {
-            type: String,
-            default: '#d81e06',
-        },
-        unFavoriteColor: {
-            type: String,
-            default: '#ffffff',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconGithub.vue
+++ b/src/src/components/icons/iconGithub.vue
@@ -1,27 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683531657415" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-             p-id="32210" :width="width" :height="height" :style="{fill: color}">
-            <path d="M512 12.64c-282.752 0-512 229.216-512 512 0 226.208 146.72 418.144 350.144 485.824 25.6 4.736 35.008-11.104 35.008-24.64 0-12.192-0.48-52.544-0.704-95.328-142.464 30.976-172.512-60.416-172.512-60.416-23.296-59.168-56.832-74.912-56.832-74.912-46.464-31.776 3.52-31.136 3.52-31.136 51.392 3.616 78.464 52.768 78.464 52.768 45.664 78.272 119.776 55.648 148.992 42.56 4.576-33.088 17.856-55.68 32.512-68.48-113.728-12.928-233.28-56.864-233.28-253.024 0-55.904 20-101.568 52.768-137.44-5.312-12.896-22.848-64.96 4.96-135.488 0 0 43.008-13.76 140.832 52.48 40.832-11.36 84.64-17.024 128.16-17.248 43.488 0.192 87.328 5.888 128.256 17.248 97.728-66.24 140.64-52.48 140.64-52.48 27.872 70.528 10.336 122.592 5.024 135.488 32.832 35.84 52.704 81.536 52.704 137.44 0 196.64-119.776 239.936-233.792 252.64 18.368 15.904 34.72 47.04 34.72 94.816 0 68.512-0.608 123.648-0.608 140.512 0 13.632 9.216 29.6 35.168 24.576 203.328-67.776 349.856-259.616 349.856-485.76 0-282.784-229.248-512-512-512z" p-id="32211"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconGithub',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconHistory.vue
+++ b/src/src/components/icons/iconHistory.vue
@@ -1,28 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683129100927" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3671" :width="width" :height="height" :style="{fill: color}">
-            <path d="M798.5152 707.9936v-77.0048c0-12.288-9.8304-22.7328-22.1184-22.7328-13.9264 0-24.1664 11.4688-24.1664 25.3952V739.328c0 8.192 6.7584 14.9504 14.9504 14.9504h83.5584c13.1072 0 24.1664-10.6496 23.7568-23.7568-0.4096-13.7216-11.6736-22.528-25.3952-22.528h-50.5856z m-502.3744-119.1936c-16.384 0-29.2864 13.9264-27.8528 30.5152 1.2288 14.5408 13.9264 25.3952 28.672 25.3952h142.9504c14.5408 0 27.2384-10.8544 28.672-25.3952 1.4336-16.5888-11.4688-30.5152-27.8528-30.5152h-144.5888z m0-231.6288h309.4528c15.7696 0 28.4672-12.9024 28.0576-28.8768-0.4096-14.9504-13.7216-27.2384-28.672-27.2384H296.7552c-14.7456 0-27.8528 11.8784-28.672 26.624-0.4096 7.9872 2.6624 15.5648 8.192 21.2992 5.3248 5.12 12.288 8.192 19.8656 8.192z m241.4592 113.0496c0-15.36-12.4928-28.0576-28.0576-28.0576H296.7552c-14.5408 0-27.2384 10.8544-28.4672 25.3952-1.4336 16.5888 11.6736 30.5152 28.0576 30.5152h213.4016c15.36 0.4096 27.8528-12.288 27.8528-27.8528z m0 0" p-id="3672"></path>
-            <path d="M568.5248 846.4384H248.0128c-24.1664 0-44.032-19.8656-44.032-44.032V212.1728c0-24.1664 19.8656-44.032 44.032-44.032h461.0048c24.1664 0 44.032 19.8656 44.032 44.032v223.0272c0 15.5648 11.6736 28.8768 27.0336 30.3104 17.6128 1.6384 32.3584-12.288 32.3584-29.696V212.1728c0-57.1392-46.4896-103.6288-103.424-103.6288H248.0128c-55.296 0-100.5568 43.008-103.424 98.0992v601.4976c2.8672 54.8864 48.3328 97.8944 103.424 97.8944h319.8976c14.9504 0 28.0576-10.6496 30.1056-25.3952 2.6624-18.432-11.6736-34.2016-29.4912-34.2016z m0 0" p-id="3673"></path>
-            <path d="M782.7456 502.1696c-111.8208 0-202.752 91.3408-201.9328 203.5712 0.8192 109.7728 90.5216 199.4752 200.4992 200.4992 112.0256 0.8192 203.5712-90.112 203.5712-201.9328-0.2048-111.616-90.7264-202.1376-202.1376-202.1376z m146.432 201.9328c0 81.5104-66.7648 147.456-148.48 146.432-78.848-1.024-143.1552-65.3312-144.384-143.9744-1.2288-81.92 64.9216-148.8896 146.432-148.8896 80.6912 0 146.432 65.536 146.432 146.432z m0 0" p-id="3674"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconHistory',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconI18n.vue
+++ b/src/src/components/icons/iconI18n.vue
@@ -1,27 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683798392851" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-             p-id="38484" :width="width" :height="height" :style="{fill: color}">
-            <path d="M496 0C222.048 0 0 222.048 0 496s222.048 496 496 496 496-222.048 496-496S769.952 0 496 0z m431.2 480H735.328c-1.76-70.88-14.368-138.592-36.736-200.576a522.688 522.688 0 0 0 119.552-70.304A429.856 429.856 0 0 1 927.2 480zM478.304 927.104c-53.184-44.288-97.792-101.792-130.432-168.576A495.904 495.904 0 0 1 480 736.8v190.368l-1.696-0.064z m35.328-862.208c60.352 50.24 109.6 117.536 142.912 196.032-45.632 15.584-94.112 24.64-144.576 26.24V64.8l1.664 0.096z m53.312 5.44a430.816 430.816 0 0 1 229.248 115.648 489.504 489.504 0 0 1-109.696 63.936c-29.12-69.024-69.984-130.048-119.552-179.584zM480 64.8v222.368a495.744 495.744 0 0 1-144.576-26.24c33.312-78.496 82.56-145.792 142.912-196.032L480 64.8zM305.472 249.952a490.72 490.72 0 0 1-109.664-63.936A430.72 430.72 0 0 1 425.056 70.368c-49.6 49.504-90.432 110.528-119.584 179.584z m17.888 40.48c49.344 17.12 101.92 27.104 156.64 28.768V480H288.672c1.728-67.008 13.6-131.04 34.688-189.568zM480 512v192.8a525.152 525.152 0 0 0-145.248 24.608A601.12 601.12 0 0 1 288.672 512H480z m-54.944 409.664A429.792 429.792 0 0 1 215.616 824a486.368 486.368 0 0 1 102.016-54.4 554.144 554.144 0 0 0 107.424 152.064zM512 927.2V736.832c45.824 1.472 90.24 8.64 132.128 21.728-32.672 66.784-77.248 124.288-130.432 168.576a31.2 31.2 0 0 0-1.696 0.064z m162.368-157.6A490.24 490.24 0 0 1 776.384 824a430.08 430.08 0 0 1-209.44 97.664A554.816 554.816 0 0 0 674.368 769.6z m-17.12-40.192A525.568 525.568 0 0 0 512 704.8V512h191.328a601.792 601.792 0 0 1-46.08 217.408zM512 480V319.2a526.08 526.08 0 0 0 156.64-28.736c21.056 58.528 32.928 122.56 34.688 189.568H512zM173.888 209.12a523.2 523.2 0 0 0 119.52 70.304C271.04 341.408 258.432 409.12 256.672 480H64.8a429.728 429.728 0 0 1 109.088-270.88zM64.8 512h191.872a631.168 631.168 0 0 0 48.096 228.384 519.36 519.36 0 0 0-113.216 61.792A430.816 430.816 0 0 1 64.8 512z m735.648 290.144A520.192 520.192 0 0 0 687.2 740.352a631.2 631.2 0 0 0 48.128-228.384H927.2a430.848 430.848 0 0 1-126.752 290.176z" p-id="38485"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconI18n',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconInput.vue
+++ b/src/src/components/icons/iconInput.vue
@@ -1,28 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683444010648" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-             p-id="15448" :width="width" :height="height" :style="{fill: color}">
-            <path d="M787.692308 157.538462a78.769231 78.769231 0 0 1 78.76923 78.76923v551.384616a78.769231 78.769231 0 0 1-78.76923 78.76923H236.307692a78.769231 78.769231 0 0 1-78.76923-78.76923V236.307692a78.769231 78.769231 0 0 1 78.76923-78.76923h551.384616z m0 39.384615H236.307692a39.384615 39.384615 0 0 0-39.108923 34.776615L196.923077 236.307692v551.384616a39.384615 39.384615 0 0 0 34.776615 39.108923L236.307692 827.076923h551.384616a39.384615 39.384615 0 0 0 39.108923-34.776615L827.076923 787.692308V236.307692a39.384615 39.384615 0 0 0-34.776615-39.108923L787.692308 196.923077z m-354.461539 39.384615a19.692308 19.692308 0 0 1 3.544616 39.069539L433.230769 275.692308H374.153846v472.615384H433.230769a19.692308 19.692308 0 0 1 3.544616 39.069539L433.230769 787.692308H275.692308a19.692308 19.692308 0 0 1-3.544616-39.069539L275.692308 748.307692h59.076923V275.692308H275.692308a19.692308 19.692308 0 0 1-3.544616-39.069539L275.692308 236.307692h157.538461z"
-                  p-id="15449"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconInput',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconLoading.vue
+++ b/src/src/components/icons/iconLoading.vue
@@ -1,91 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-             style="margin: auto; background: transparent; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" :width="width" :height="height" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-            <circle cx="50" cy="50" r="0" fill="none" stroke="#e90c59" stroke-width="2"
-                    style="animation-play-state: running; animation-delay: 0s;">
-                <animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;50" keyTimes="0;1"
-                         keySplines="0 0.2 0.8 1" calcMode="spline" begin="0s"
-                         style="animation-play-state: running; animation-delay: 0s;"></animate>
-                <animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1"
-                         keySplines="0.2 0 0.8 1" calcMode="spline" begin="0s"
-                         style="animation-play-state: running; animation-delay: 0s;"></animate>
-            </circle>
-            <circle cx="50" cy="50" r="0" fill="none" stroke="#46dff0" stroke-width="2"
-                    style="animation-play-state: running; animation-delay: 0s;">
-                <animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;50" keyTimes="0;1"
-                         keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.5s"
-                         style="animation-play-state: running; animation-delay: 0s;"></animate>
-                <animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1"
-                         keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.5s"
-                         style="animation-play-state: running; animation-delay: 0s;"></animate>
-            </circle>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconLoading',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        }
-    },
-}
-</script>
-<style>
-.lds-ripple {
-    display: inline-block;
-    position: relative;
-    width: 80px;
-    height: 80px;
-}
-
-.lds-ripple div {
-    position: absolute;
-    border: 4px solid #fff;
-    opacity: 1;
-    border-radius: 50%;
-    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-}
-
-.lds-ripple div:nth-child(2) {
-    animation-delay: -0.5s;
-}
-
-@keyframes lds-ripple {
-    0% {
-        top: 36px;
-        left: 36px;
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-    4.9% {
-        top: 36px;
-        left: 36px;
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-    5% {
-        top: 36px;
-        left: 36px;
-        width: 0;
-        height: 0;
-        opacity: 1;
-    }
-    100% {
-        top: 0px;
-        left: 0px;
-        width: 72px;
-        height: 72px;
-        opacity: 0;
-    }
-}
-</style>
--- a/src/src/components/icons/iconRefresh.vue
+++ b/src/src/components/icons/iconRefresh.vue
@@ -1,27 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1684324200951" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-             p-id="5864" :width="width" :height="height" :style="{fill: color}">
-            <path d="M698.879266 777.973c-56.825 40.33-123.34 60.55-191.357 59.625-8.99-0.095-17.93-0.575-26.767-1.35-3.597-0.345-7.19-0.95-10.84-1.395-6.94-0.945-13.88-1.895-20.622-3.22-4.195-0.805-8.292-1.875-12.385-2.845-6.642-1.575-13.232-3.175-19.727-5.125-3.095-0.97-6.14-2.095-9.237-3.145-7.44-2.52-14.882-5.135-22.122-8.21-1.647-0.675-3.245-1.445-4.845-2.2-8.487-3.77-16.827-7.71-24.92-12.16-0.397-0.195-0.698-0.37-1.098-0.57-27.367-15.21-52.385-34.205-74.357-56.405-0.348-0.355-0.7-0.75-1.048-1.15-6.842-6.915-13.332-14.18-19.525-21.725-1.298-1.62-2.547-3.34-3.845-4.985-44.697-56.61-71.662-128.245-71.662-206.162l75.805 0c1.95 0 3.845-1.047 4.848-2.895 0.997-1.827 0.85-3.997-0.253-5.62l-127.39-193.477c-0.997-1.5-2.688-2.5-4.61-2.5-1.895 0-3.592 1-4.59 2.5L0.936266 498.409c-1.075 1.647-1.25 3.795-0.25 5.645 0.997 1.845 2.897 2.895 4.845 2.895l75.807 0c0 91.605 28.212 176.525 76.117 246.734 0.6 0.97 0.997 2.02 1.648 2.995 4.992 7.195 10.485 13.805 15.83 20.6 1.947 2.57 3.845 5.21 5.892 7.74 7.84 9.635 16.18 18.675 24.72 27.54 0.847 0.87 1.597 1.745 2.395 2.52 28.767 29.16 61.277 53.73 96.682 73.35 0.9 0.585 1.797 1.13 2.795 1.655 10.188 5.545 20.675 10.56 31.312 15.3 2.645 1.15 5.192 2.425 7.887 3.57 9.09 3.8 18.427 7.145 27.817 10.335 4.443 1.53 8.84 3.08 13.335 4.475 8.237 2.475 16.63 4.515 25.065 6.57 5.645 1.325 11.19 2.745 16.932 3.845 2.342 0.495 4.59 1.22 6.937 1.595 7.992 1.43 15.982 2.225 23.972 3.22 2.895 0.325 5.742 0.82 8.587 1.15 14.385 1.42 28.665 2.375 42.947 2.375 87.447 0 172.737-27.075 245.902-78.98 23.32-16.58 29.01-49.105 12.675-72.755C754.419266 767.113 722.199266 761.393 698.879266 777.973M941.484266 506.951c-0.045-91.335-28.065-176.075-75.755-246.137-0.705-1.2-1.195-2.422-1.95-3.52-5.945-8.565-12.39-16.555-18.825-24.57-0.75-0.975-1.45-1.997-2.245-2.945-43.65-53.605-98.435-95.027-160.555-122.095-1.7-0.75-3.4-1.597-5.1-2.347-9.935-4.117-20.065-7.762-30.255-11.235-3.695-1.223-7.345-2.572-11.09-3.695-8.885-2.722-17.92-4.942-27.015-7.065-5.04-1.175-10.04-2.472-15.125-3.472-2.555-0.5-4.895-1.247-7.395-1.695-6.79-1.202-13.635-1.728-20.425-2.6-4.7-0.597-9.345-1.347-14.09-1.847-11.43-1.072-22.77-1.522-34.105-1.722-2.045 0-4.095-0.325-6.142-0.325-0.348 0-0.7 0.1-1.095 0.125-87.292 0.075-172.437 26.765-245.499 78.6-23.37 16.527-29.062 49.11-12.73 72.755 16.327 23.645 48.587 29.39 71.91 12.81 56.43-40.025 122.297-60.275 189.812-59.672 9.74 0.072 19.28 0.548 28.715 1.445 2.95 0.348 5.795 0.775 8.69 1.15 7.795 0.95 15.485 2.072 23.07 3.595 3.35 0.647 6.69 1.525 9.935 2.272 7.445 1.695 14.895 3.52 22.185 5.742 2.29 0.747 4.54 1.572 6.83 2.345 8.34 2.75 16.485 5.717 24.52 9.09 0.81 0.348 1.655 0.772 2.45 1.097 48.09 20.95 90.29 53.207 123.205 93.53 0.19 0.253 0.395 0.575 0.59 0.8 46.345 57.102 74.26 130.107 74.26 209.579l-75.81 0c-1.94 0-3.845 1.048-4.84 2.895-1 1.845-0.855 3.997 0.255 5.645l127.43 193.454c0.96 1.495 2.66 2.465 4.6 2.465 1.895 0 3.595-0.97 4.595-2.465l127.345-193.454c1.095-1.648 1.245-3.8 0.25-5.645-1.005-1.847-2.895-2.895-4.85-2.895l-75.75 0L941.485266 506.951z" p-id="5865"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'iconRefresh',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconRemove.vue
+++ b/src/src/components/icons/iconRemove.vue
@@ -1,27 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683529041470" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-             p-id="28934" :width="width" :height="height" :style="{fill: color}">
-            <path d="M781.28 851.36a58.56 58.56 0 0 1-58.56 58.56H301.28a58.72 58.72 0 0 1-58.56-58.56V230.4h538.56zM359.68 125.44a11.84 11.84 0 0 1 12-12h281.28a11.84 11.84 0 0 1 12 12V160H359.68zM956.8 160H734.72V125.44a81.76 81.76 0 0 0-81.76-81.76H371.68a82.08 82.08 0 0 0-81.76 81.76V160H67.2a35.36 35.36 0 0 0 0 70.56h105.12v620.8a128.96 128.96 0 0 0 128.96 128.96h421.44a128.96 128.96 0 0 0 128.96-128.96V230.4h105.12a35.2 35.2 0 0 0 35.2-35.2 34.56 34.56 0 0 0-35.2-35.2zM512 804.16a35.2 35.2 0 0 0 35.2-35.36V393.92a35.2 35.2 0 1 0-70.4 0v374.88a35.2 35.2 0 0 0 35.2 35.36m-164.32 0a35.36 35.36 0 0 0 35.36-35.36V393.92a35.36 35.36 0 1 0-70.56 0v374.88a36.32 36.32 0 0 0 35.2 35.36m328.64 0a35.36 35.36 0 0 0 35.2-35.36V393.92a35.36 35.36 0 1 0-70.56 0v374.88a35.36 35.36 0 0 0 35.36 35.36" p-id="28935"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconRemove',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconSetting.vue
+++ b/src/src/components/icons/iconSetting.vue
@@ -1,28 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683889314683" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11799" :width="width" :height="height" :style="{fill: color}">
-            <path d="M972.353753 405.620568l-98.014307-19.641248a387.002968 387.002968 0 0 0-17.178095-41.233826l55.53291-83.299366a63.946019 63.946019 0 0 0-7.997251-80.708257l-61.546843-61.546843a63.850052 63.850052 0 0 0-80.708256-7.997251l-83.299366 55.500922a386.747056 386.747056 0 0 0-41.297804-17.146106L618.203493 51.502296A63.91403 63.91403 0 0 0 555.473056 0.063978h-87.01009a63.978008 63.978008 0 0 0-62.730437 51.438318l-19.641248 98.046297c-14.171129 4.926307-27.9264 10.716316-41.233826 17.146106L261.590078 111.193777a63.850052 63.850052 0 0 0-80.740245 7.997251L119.334979 180.737871a63.978008 63.978008 0 0 0-7.997251 80.708257l55.500921 83.299366c-6.461779 13.339415-12.219799 27.094686-17.146106 41.265815l-98.078285 19.609259A63.978008 63.978008 0 0 0 0.17594 468.351004v87.010091a63.978008 63.978008 0 0 0 51.438318 62.730436l98.046296 19.673237c4.926307 14.171129 10.716316 27.9264 17.146106 41.233826L111.337728 762.29796a63.946019 63.946019 0 0 0 7.997251 80.708257l61.546843 61.546843a63.850052 63.850052 0 0 0 80.708256 7.997251l83.299366-55.532911c13.339415 6.493768 27.094686 12.251788 41.265815 17.178095l19.609259 98.014308a63.978008 63.978008 0 0 0 62.730437 51.470307h87.01009a63.978008 63.978008 0 0 0 62.730437-51.470307l19.673237-98.014308c14.171129-4.926307 27.9264-10.748305 41.233826-17.178095l83.299366 55.532911a63.91403 63.91403 0 0 0 80.708256-7.997251l61.546843-61.546843a63.978008 63.978008 0 0 0 7.997251-80.708257l-55.53291-83.299366c6.493768-13.371404 12.251788-27.126675 17.178095-41.297804l98.014307-19.609259A63.978008 63.978008 0 0 0 1023.82406 555.361095v-87.010091c0-30.485521-21.560589-56.748493-51.470307-62.730436z m-110.585986 169.381775a63.882041 63.882041 0 0 0-47.855549 41.74565c-4.126581 11.803942-8.924932 23.256006-14.299085 34.35619a63.850052 63.850052 0 0 0 4.318515 63.402205l55.532911 83.299366-61.546843 61.546844-83.299366-55.532911a63.882041 63.882041 0 0 0-63.338228-4.382494c-11.132173 5.374153-22.552248 10.236481-34.420168 14.363063a63.91403 63.91403 0 0 0-41.681672 47.85555l-19.673237 98.078285h-87.01009l-19.609259-98.078285a63.882041 63.882041 0 0 0-41.713661-47.85555 325.328168 325.328168 0 0 1-34.388179-14.299085 63.786074 63.786074 0 0 0-63.370217 4.318516l-83.299366 55.532911-61.546843-61.546844 55.500922-83.299366c12.571678-18.873512 14.203118-42.993221 4.382493-63.338227a323.280872 323.280872 0 0 1-14.331074-34.420168 63.978008 63.978008 0 0 0-47.855549-41.681672l-98.046297-19.673237L64.153947 468.351004l98.078286-19.609259a63.946019 63.946019 0 0 0 47.855549-41.713661c4.126581-11.803942 8.892943-23.287995 14.299085-34.388179a63.818063 63.818063 0 0 0-4.350504-63.370216L164.56743 225.970323 226.082284 164.423479l83.299366 55.500922a63.882041 63.882041 0 0 0 63.338228 4.382494 322.769048 322.769048 0 0 1 34.388179-14.331074 63.946019 63.946019 0 0 0 41.713661-47.85555l19.641248-98.046296 87.01009-0.031989 19.609259 98.078285a63.91403 63.91403 0 0 0 41.74565 47.85555c11.803942 4.126581 23.256006 8.892943 34.35619 14.299085a63.91403 63.91403 0 0 0 63.402206-4.350505l83.299366-55.500922 61.546843 61.546844-55.532911 83.299366a64.169942 64.169942 0 0 0-4.382493 63.338227c5.374153 11.100184 10.236481 22.552248 14.363063 34.388179a63.882041 63.882041 0 0 0 47.855549 41.713661l98.014308 19.641248 0.095967 87.010091-98.078286 19.641248z" p-id="11800"></path>
-            <path d="M512 287.933023A223.923026 223.923026 0 1 0 512.031989 735.747087 223.923026 223.923026 0 0 0 512 287.901034z m0 419.887664a195.964637 195.964637 0 1 1 195.932648-195.932649A195.996626 195.996626 0 0 1 512 707.820687z" p-id="11801"></path>
-            <path d="M512 383.900034a127.956015 127.956015 0 1 0 0 255.912031 127.956015 127.956015 0 0 0 0-255.912031z m0 223.955016a95.999 95.999 0 0 1 0-191.934023 95.999 95.999 0 0 1 0 191.934023z" p-id="11802"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconSetting',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconTooltip.vue
+++ b/src/src/components/icons/iconTooltip.vue
@@ -1,28 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683529502013" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-             p-id="30771" :width="width" :height="height" :style="{fill: color}">
-            <path d="M410.496 768L512 869.504 613.504 768H832a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64H192a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h218.496zM512 960l-128-128H192a128 128 0 0 1-128-128V192a128 128 0 0 1 128-128h640a128 128 0 0 1 128 128v512a128 128 0 0 1-128 128h-192l-128 128z" p-id="30772"></path>
-            <path d="M672 320h-320V256h320v64zM480 640V320h64v320h-64z" p-id="30773"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconTooltip',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconTranslate.vue
+++ b/src/src/components/icons/iconTranslate.vue
@@ -1,27 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683017357407" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6069" :width="width" :height="height" :style="{fill: color}">
-            <path d="M435.58 830.832H176.882c-35.078 0-63.892-28.814-63.892-63.891V257.059c0-35.077 28.814-63.891 63.892-63.891H435.58v-63.266H176.882c-70.156 0-127.157 57.002-127.157 127.157v509.882c0 70.155 57.001 127.157 127.157 127.157H435.58v-63.266z m365.812 0h45.726c35.078 0 63.892-28.814 63.892-63.891h63.265c0 70.155-57.001 127.157-127.157 127.157h-45.726v-63.266z m-63.892 0v63.892H592.804v-63.892H737.5zM911.01 703.05V543.946h63.265v159.103H911.01z m0-222.995V320.951h63.265v159.103H911.01z m0-222.995c0-35.077-28.814-63.891-63.892-63.891h-45.726v-63.266h45.726c70.156 0 127.157 57.002 127.157 127.157H911.01zM737.5 193.168H592.804v-63.266H737.5v63.266zM486.944 66.01h63.892v891.978h-63.892V66.011z m0 0" p-id="6070"></path>
-            <path d="M272.093 341.622h55.748l114.003 341.382h-51.99L362.92 597.19H237.641l-27.56 85.189H158.09l114.003-340.756z m-20.045 209.84h95.838l-46.98-149.707h-1.878l-46.98 149.708z m364.559-209.84H753.16c29.44 0 53.243 8.143 69.53 24.43 15.659 15.033 23.176 35.703 23.176 61.385 0 19.418-4.385 35.078-11.902 48.859-8.143 12.528-20.044 22.55-34.451 28.187 19.418 4.385 34.451 13.155 44.473 26.935 9.396 13.154 14.407 31.946 14.407 55.122 0 34.452-10.648 59.507-30.693 75.793-17.539 13.155-42.594 20.045-74.54 20.045H615.98V341.622z m48.858 45.726v97.717h74.54c20.672 0 35.705-4.384 44.474-11.901 8.143-8.143 13.155-21.297 13.155-38.836 0-16.286-4.385-28.188-13.155-35.078-9.395-7.517-23.176-11.275-43.22-11.275l-75.794-0.627z m0 143.444v105.86h80.805c18.165 0 33.198-3.132 43.22-10.023 13.155-8.77 20.045-21.923 20.045-41.341 0-19.419-5.011-33.2-14.407-41.969-10.022-8.769-25.682-13.154-47.606-13.154l-82.057 0.627z m0 0" p-id="6071"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconTranslate',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconUnflod.vue
+++ b/src/src/components/icons/iconUnflod.vue
@@ -1,32 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1684421226814" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-             p-id="3191" :width="width" :height="height" :style="{fill: color}">
-            <path
-                d="M896 512a384 384 0 1 0-384 384 384 384 0 0 0 384-384z m64 0A448 448 0 1 1 512 64a448 448 0 0 1 448 448z"
-                p-id="3192"></path>
-            <path
-                d="M713.28 425.28a32 32 0 0 1 45.44 45.44l-224 224a32 32 0 0 1-45.44 0l-224-224a32 32 0 0 1 45.44-45.44L512 626.88z"
-                p-id="3193"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconUnfold',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconUse.vue
+++ b/src/src/components/icons/iconUse.vue
@@ -1,28 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1683436829140" viewBox="0 0 1067 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-             p-id="10072" :width="width" :height="height" :style="{fill: color}">
-            <path d="M848.73860445 116.52039834H352.58730783a89.55799573 89.55799573 0 0 0-89.55799574 89.55799572v219.8648802a134.33699397 134.33699397 0 0 0-63.13838747 32.68866817l-8.50800957 6.7168497L123.76662828 516.84464008a16.56822936 16.56822936 0 0 0-7.16463946 12.0903293 26.8673988 26.8673988 0 0 0 3.13452995 15.22485927 19.25496877 19.25496877 0 0 0 27.31518858 3.58231974l75.67650654-58.21269765a89.55799573 89.55799573 0 0 1 81.94556572-25.52402869h118.66434495a22.38949874 22.38949874 0 0 1 21.94170895 13.43369939 30.44971853 30.44971853 0 0 1 0 20.59833887 21.04612865 21.04612865 0 0 1-21.94170895 13.4336994h-102.99169514a19.25496877 19.25496877 0 0 0 0 38.06214855H698.72896144a21.94170896 21.94170896 0 0 1 21.94170896 13.4336994 21.04612865 21.04612865 0 0 1 0 10.29916942v10.29916945a21.94170896 21.94170896 0 0 1-21.94170896 13.43369939H469.46049212a19.25496877 19.25496877 0 0 0 0 38.06214856h71.64639705a23.28507907 23.28507907 0 0 1 22.38949874 13.4336994 21.04612865 21.04612865 0 0 1 0 10.29916943v10.29916943a23.28507907 23.28507907 0 0 1-22.38949874 13.88148918H471.25165199a19.25496877 19.25496877 0 0 0-19.25496877 18.807179 19.70275932 19.70275932 0 0 0 19.25496877 18.80717978h61.34722762a25.07623893 25.07623893 0 0 1 22.38949873 13.4336994v20.59833887a22.38949874 22.38949874 0 0 1-22.38949873 15.22485926H471.25165199a18.807179 18.807179 0 1 0 0 37.61435801h25.5240287a24.62844916 24.62844916 0 0 1 21.94170897 13.88148917A20.1505491 20.1505491 0 0 1 519.61296999 832.98436494a64.48175681 64.48175681 0 0 1 0 10.29916944 21.94170896 21.94170896 0 0 1-21.94170897 13.43369939H257.20804195l-116.42539453-18.807179H135.85695759a20.1505491 20.1505491 0 0 0-18.80717901 15.67264981 20.59833887 20.59833887 0 0 0 13.43369941 23.73286884l120.45550404 29.55413821h246.28448922a38.06214856 38.06214856 0 0 0 13.88148917 0h339.87259445a89.55799573 89.55799573 0 0 0 89.55799573-89.55799572V206.07839406a89.55799573 89.55799573 0 0 0-91.79694615-89.55799572z m-447.78997941 118.21655438h391.81623218a16.12043959 16.12043959 0 0 1 17.01601914 17.01601913 16.12043959 16.12043959 0 0 1-17.01601914 17.01601914H399.15746517a16.12043959 16.12043959 0 0 1-17.01601913-17.91159868 16.12043959 16.12043959 0 0 1 17.01601913-16.12043959z m0 140.15826336a16.12043959 16.12043959 0 0 1-17.01601914-17.01601914 16.12043959 16.12043959 0 0 1 15.22485927-17.46380889h393.60739205a16.12043959 16.12043959 0 0 1 17.01601914 17.46380889 16.12043959 16.12043959 0 0 1-17.01601914 17.01601914z"
-                  p-id="10073"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconUse',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconWeight.vue
+++ b/src/src/components/icons/iconWeight.vue
@@ -1,47 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg :width="width" :height="height" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" t="1683096165139" version="1.1" p-id="5038" :style="{fill: color}">
-            <path v-if="type == 'parentheses'" p-id="5039" d="m214.61538,391.33624l-83.39512,0a530.19984,530.19984 0 0 0 -92.21735,299.62317c0,111.09362 34.02387,214.26386 92.21735,299.62317l83.39512,0a464.18287,464.18287 0 0 1 -109.02954,-299.62317c0,-114.05655 40.9485,-218.55846 109.02954,-299.62317zm181.43848,599.24634a464.18287,464.18287 0 0 0 109.02954,-299.62317c0,-114.05655 -40.9485,-218.55846 -109.02954,-299.62317l83.4284,0a530.19984,530.19984 0 0 1 92.18406,299.62317c0,111.09362 -34.02387,214.26386 -92.21735,299.62317l-83.39512,0l0.00001,0z" stroke="null" />
-            <path v-if="type == 'brackets'" stroke="null" p-id="5198" d="m39.55555,391.33333l166.1111,0l0,66.44444l-99.66666,0l0,465.11109l99.66666,0l0,66.44444l-166.1111,0l0,-597.99996zm365.44442,531.55552l0,66.44444l166.1111,0l0,-597.99996l-166.1111,0l0,66.44444l99.66666,0l0,465.11109l-99.66666,0z" />
-            <g v-if="type == 'braces'" stroke="null">
-                <path stroke="null" p-id="5405" d="m82.76543,491.92594a99.48148,99.48148 0 0 1 99.48148,-99.48148l33.16049,0l0,66.32099l-33.16049,0a33.1605,33.1605 0 0 0 -33.1605,33.1605l0,132.64198a99.48148,99.48148 0 0 1 -99.48148,99.48148l0,-66.32099a33.1605,33.1605 0 0 0 33.1605,-33.16049l0,-132.64198z" />
-                <path stroke="null" p-id="5406" d="m149.08642,757.20989a99.48148,99.48148 0 0 0 -99.48148,-99.48148l-33.1605,0l0,66.32099l33.1605,0a33.1605,33.1605 0 0 1 33.1605,33.16049l0,132.64198a99.48148,99.48148 0 0 0 99.48148,99.48148l0,-66.32099a33.1605,33.1605 0 0 1 -33.1605,-33.1605l0,-132.64198zm464.24691,-265.28395a99.48148,99.48148 0 0 0 -99.48148,-99.48148l-33.16049,0l0,66.32099l33.16049,0a33.1605,33.1605 0 0 1 33.1605,33.1605l0,132.64198a99.48148,99.48148 0 0 0 99.48148,99.48148l0,-66.32099a33.1605,33.1605 0 0 1 -33.1605,-33.16049l0,-132.64198z" />
-                <path stroke="null" p-id="5407" d="m547.01234,757.20989a99.48148,99.48148 0 0 1 99.48148,-99.48148l33.1605,0l0,66.32099l-33.1605,0a33.1605,33.1605 0 0 0 -33.1605,33.16049l0,132.64198a99.48148,99.48148 0 0 1 -99.48148,99.48148l0,-66.32099a33.1605,33.1605 0 0 0 33.1605,-33.1605l0,-132.64198z" />
-            </g>
-            <path v-if="increase" stroke="null" d="m805.42451,14.47744l0,464.33459l-58.04183,0l0,-464.33459l58.04183,0z" p-id="2293" />
-            <path stroke="null" d="m1008.57088,217.62383l0,58.04183l-464.33459,0l0,-58.04183l464.33459,0z" p-id="2294" />
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconWeight',
-    props: {
-        type: {
-            type: String,
-            /**
-             * parentheses: ()
-             * brackets: []
-             * braces: {}
-             */
-            default: 'parentheses',
-        },
-        increase: {
-            type: Boolean,
-            default: true,
-        },
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#000',
-        },
-    },
-}
-</script>
--- a/src/src/components/icons/iconWrap.vue
+++ b/src/src/components/icons/iconWrap.vue
@@ -1,28 +0,0 @@
-<template>
-    <div class="icon-svg" :style="{width: width + 'px', height: height + 'px'}">
-        <svg t="1684120692315" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-             p-id="4885" :width="width" :height="height" :style="{fill: color}">
-            <path d="M64 64h704v192H64z m-1.28 700.416H960V960H62.72z" p-id="4886"></path>
-            <path d="M895.872 64v403.904H320.128v-68.416L191.872 501.504 320.128 608v-72.832h639.744V64z" p-id="4887"></path>
-        </svg>
-    </div>
-</template>
-<script>
-export default {
-    name: 'IconWrap',
-    props: {
-        width: {
-            type: Number,
-            default: 16,
-        },
-        height: {
-            type: Number,
-            default: 16,
-        },
-        color: {
-            type: String,
-            default: '#02b7fd',
-        },
-    },
-}
-</script>
--- a/src/src/components/phystonPrompt.vue.REMOVED.git-id
+++ b/src/src/components/phystonPrompt.vue.REMOVED.git-id
@@ -1 +1 @@
-2236d48502f1d81fbbf431d022601cf6b808c5cc
+938ade8bd3d82b26cc75aa279a8dd4663e814073
--- a/src/src/components/selectLanguage.vue
+++ b/src/src/components/selectLanguage.vue
@@ -2,7 +2,7 @@
    <div class="physton-prompt-select-language" v-if="isOpen" @click="close">
        <div class="language-main" @click.stop>
            <div class="language-close" @click="close">
-                <icon-close width="24" height="24" />
+                <icon-svg name="close"/>
            </div>
            <div class="language-list" @click.stop>
                <div v-for="item in languages" :key="item.code"
@@ -16,11 +16,11 @@
 </template>
 <script>
 import LanguageMixin from "@/mixins/languageMixin";
-import IconClose from "@/components/icons/iconClose.vue";
+import IconSvg from "@/components/iconSvg.vue";

 export default {
    name: 'SelectLanguage',
-    components: {IconClose},
+    components: {IconSvg},
    mixins: [LanguageMixin],
    props: {},
    data() {
--- a/src/src/components/translateSetting.vue
+++ b/src/src/components/translateSetting.vue
@@ -48,7 +48,7 @@
                    <div class="line-title"></div>
                    <div class="line-content">
                        <div class="hover-scale-120 test-btn" @click="onTestClick">
-                            <icon-loading v-if="loading" width="40" height="40" aria-required="true"/>
+                            <icon-svg v-if="loading" name="loading"/>
                            <template v-else>{{getLang('test')}}</template>
                        </div>
                    </div>
@@ -69,8 +69,8 @@
                                <option v-for="item in tagCompleteFiles" :value="item.key">{{ item.name }}</option>
                            </select>
                            <div class="refresh-btn hover-scale-120" v-tooltip="getLang('refresh')" @click="refreshCSVs">
-                                <icon-loading v-if="tagCompleteFilesLoading" width="20" height="20" aria-required="true"/>
-                                <icon-refresh v-else width="20" height="20" />
+                                <icon-svg v-if="tagCompleteFilesLoading" name="loading"/>
+                                <icon-svg v-else name="refresh" />
                            </div>
                        </div>
                    </div>
@@ -94,14 +94,12 @@
 </template>
 <script>
 import LanguageMixin from "@/mixins/languageMixin";
-import IconCopy from "@/components/icons/iconCopy.vue";
-import IconLoading from "@/components/icons/iconLoading.vue";
 import common from "@/utils/common";
-import IconRefresh from "@/components/icons/iconRefresh.vue";
+import IconSvg from "@/components/iconSvg.vue";

 export default {
    name: 'TranslateSetting',
-    components: {IconRefresh, IconLoading, IconCopy},
+    components: {IconSvg},
    mixins: [LanguageMixin],
    props: {},
    data() {
--- a/src/src/utils/common.js
+++ b/src/src/utils/common.js
@@ -377,4 +377,36 @@ export default {
            return `${month}/${day} ${hour}:${minute}:${second}`
        }
    },
+
+    apiUrl() {
+        let url
+        if (typeof gradioURL === "string" && gradioURL !== "") {
+            url = new URL(gradioURL)
+            url = url.origin
+        } else {
+            url = window.location.origin
+        }
+        return url + '/physton_prompt/'
+    },
+
+    removeCSS(id){
+        if (!id) return
+        let css = document.getElementById(id)
+        if (css) {
+            css.remove()
+        }
+    },
+
+    loadCSS(file, id = '', remove = true, cache = false) {
+        if (remove) this.removeCSS(id)
+        let url = this.apiUrl() + 'styles?file=' + encodeURIComponent(file)
+        if (!cache) {
+            url += '&t=' + new Date().getTime()
+        }
+        let link = document.createElement('link')
+        link.id = id
+        link.rel = 'stylesheet'
+        link.href = url
+        document.head.appendChild(link)
+    },
 }
--- a/src/src/utils/gradioAPI.js
+++ b/src/src/utils/gradioAPI.js
@@ -5,14 +5,7 @@ export default class GradioAPI {
    apiBaseURL = "";

    constructor() {
-        let url
-        if (typeof gradioURL === "string" && gradioURL !== "") {
-            url = new URL(gradioURL)
-            url = url.origin
-        } else {
-            url = window.location.origin
-        }
-        this.apiBaseURL = url + '/physton_prompt/'
+        this.apiBaseURL = common.apiUrl()
        this.api = axios.create({
            baseURL: this.apiBaseURL,
            timeout: 60000,
@@ -142,7 +135,11 @@ export default class GradioAPI {
        return (await this.api.get("/get_csv", {params: {key}})).data
    }

-    async theme(file) {
-        return (await this.api.get("/theme", {params: {file}})).data
+    async styles(file, hash="") {
+        return (await this.api.get("/styles", {params: {file, hash}})).data
+    }
+
+    async getExtensionCssList() {
+        return (await this.api.get("/get_extension_css_list")).data.css_list
    }
 }
--- a/style.css
+++ b/style.css
--- a/styles/extensions/README.MD
+++ b/styles/extensions/README.MD
@@ -0,0 +1,55 @@
+# English：
+
+## Guide to Developing Extension Styles
+
+- Each extension style is a separate folder.
+- The extension style folder must contain a `manifest.json` file, which provides basic information about the extension style.
+- The extension style folder must contain a `style.min.css` file. The `style.min.css` file is the main file of the extension style, and other `*.css` files will be ignored.
+- If you need to load images in CSS files, you can use the format `/physton_prompt/styles?file=extensions/扩展文件夹名/图片文件名`.
+- There is a `demo.zip` file in the current directory that you can refer to.
+
+## `manifest.json` Format
+
+```json
+{
+  "name": "Move the keyword input box to the left", // English name, required.
+  "i18n": {
+    "zh_CN": "移动关键词输入框到左侧",
+    "zh_HK": "移動關鍵字輸入框到左側",
+    "zh_TW": "移動關鍵字輸入框到左側"
+  },
+  "author": "Physton"
+}
+```
+
+- `name` The English name of the extension style, which must be included.
+- `i18n` The multilingual name(s) of the extension style, which can be absent or multiple. The language codes are available in the `i18n.json` file in the root directory of the extension.
+- `author` The author of the extension style, which can be absent.
+
+---
+
+# 简体中文：
+
+## 扩展样式开发说明
+- 每个扩展样式都是一个独立的文件夹。
+- 扩展样式文件夹下必须包含一个`manifest.json`文件，用于说明扩展样式的基本信息。
+- 扩展样式文件夹下必须包含一个`style.min.css`文件。`style.min.css`文件是扩展样式的主文件，其他`*.css`文件都将被忽略。
+- 在css文件中如果需要加载图片，可以使用`/physton_prompt/styles?file=extensions/扩展文件夹名/图片文件名`的方式加载。
+- 在当前文件中有一份`demo.zip`文件，可以用于参考。
+
+## `manifest.json` 格式
+
+```json
+{
+  "name": "Move the keyword input box to the left", // 英文名称，必须
+  "i18n": {
+    "zh_CN": "移动关键词输入框到左侧",
+    "zh_HK": "移動關鍵字輸入框到左側",
+    "zh_TW": "移動關鍵字輸入框到左側"
+  },
+  "author": "Physton"
+}
+```
+- `name` 扩展样式的英文名称，必须包含。
+- `i18n` 扩展样式的多语言名称，可以没有，可以为多个。国家语言代码见扩展根目录的 `i18n.json` 文件。
+- `author` 扩展样式的作者，可以没有。
--- a/styles/extensions/demo.zip
+++ b/styles/extensions/demo.zip
--- a/styles/extensions/full-input/manifest.json
+++ b/styles/extensions/full-input/manifest.json
@@ -0,0 +1,9 @@
+{
+  "name": "Move the keyword input box to the left",
+  "i18n": {
+    "zh_CN": "移动关键词输入框到左侧",
+    "zh_HK": "移動關鍵字輸入框到左側",
+    "zh_TW": "移動關鍵字輸入框到左側"
+  },
+  "author": "Physton"
+}
--- a/styles/extensions/full-input/style.less
+++ b/styles/extensions/full-input/style.less
@@ -0,0 +1,11 @@
+.physton-prompt .prompt-header {
+    .prompt-header-extend {
+        &.prompt-append {
+            .extend-content {
+                .input-tag-append {
+                    width: calc(100% - 42px - 10px);
+                }
+            }
+        }
+    }
+}
--- a/styles/extensions/full-input/style.min.css
+++ b/styles/extensions/full-input/style.min.css
@@ -0,0 +1 @@
+.physton-prompt .prompt-header .prompt-header-extend.prompt-append .extend-content .input-tag-append{width:calc(100% - 42px - 10px)}
--- a/styles/extensions/left-input/manifest.json
+++ b/styles/extensions/left-input/manifest.json
@@ -0,0 +1,9 @@
+{
+  "name": "The keyword input box is 100% width",
+  "i18n": {
+    "zh_CN": "关键词输入框100%宽度",
+    "zh_HK": "關鍵詞輸入框擁有100%寬度",
+    "zh_TW": "關鍵字輸入框佔據100%寬度"
+  },
+  "author": "Physton"
+}
--- a/styles/extensions/left-input/style.less
+++ b/styles/extensions/left-input/style.less
@@ -0,0 +1,35 @@
+.physton-prompt .prompt-header {
+    .prompt-unfold {
+        order: 1;
+    }
+
+    .prompt-header-title {
+        order: 2;
+    }
+
+    .prompt-header-counter {
+        order: 3;
+    }
+
+    .prompt-header-extend {
+        order: 5;
+
+        &:nth-last-child(2) {
+            margin-right: 0;
+        }
+
+        &.prompt-append {
+            order: 4;
+            margin-right: 10px;
+
+            .extend-content {
+                justify-content: flex-start;
+
+                .input-tag-append {
+                    order: -1;
+                    margin-right: 10px;
+                }
+            }
+        }
+    }
+}
--- a/styles/extensions/left-input/style.min.css
+++ b/styles/extensions/left-input/style.min.css
@@ -0,0 +1 @@
+.physton-prompt .prompt-header .prompt-unfold{order:1}.physton-prompt .prompt-header .prompt-header-title{order:2}.physton-prompt .prompt-header .prompt-header-counter{order:3}.physton-prompt .prompt-header .prompt-header-extend{order:5}.physton-prompt .prompt-header .prompt-header-extend:nth-last-child(2){margin-right:0}.physton-prompt .prompt-header .prompt-header-extend.prompt-append{order:4;margin-right:10px}.physton-prompt .prompt-header .prompt-header-extend.prompt-append .extend-content{justify-content:flex-start}.physton-prompt .prompt-header .prompt-header-extend.prompt-append .extend-content .input-tag-append{order:-1;margin-right:10px}
--- a/theme/default/icons/api.svg
+++ b/theme/default/icons/api.svg
--- a/styles/icons/close.svg
+++ b/styles/icons/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
+</svg>
--- a/theme/default/icons/copy.svg
+++ b/theme/default/icons/copy.svg
--- a/theme/default/icons/disabled.svg
+++ b/theme/default/icons/disabled.svg
--- a/theme/default/icons/enable.svg
+++ b/theme/default/icons/enable.svg
--- a/theme/default/icons/english.svg
+++ b/theme/default/icons/english.svg
--- a/theme/default/icons/favorite-no.svg
+++ b/theme/default/icons/favorite-no.svg
@@ -1,7 +1,7 @@
 <svg t="1683363779169" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7176"
     data-spm-anchor-id="a313x.7781069.0.i11">
    <path d="M447 134.6zM867.7 344.7l-187.3-27.2c-7.8-1.1-14.6-6-18.1-13.1l-83.7-169.7c-12.5-25.3-37.7-40.9-65.8-40.9-28.2 0-53.4 15.7-65.8 40.9l-83.7 169.7c-3.5 7.1-10.3 12-18.1 13.1l-187.3 27.2c-15.9 2.3-30.8 9.9-42 21.4l-2.7 2.9-0.3 0.3c-25.4 29.3-23.5 73.5 4.3 100.6L252.7 602c5.7 5.5 8.2 13.5 6.9 21.2l-32 186.6c-2.7 15.8-0.1 32.4 7.4 46.6l1.8 3.3 0.2 0.3c13.7 22.8 38 35.6 63 35.6 11.5 0 23.2-2.7 34.1-8.4l167.5-88.1c7-3.7 15.3-3.7 22.3 0l167.5 88.1c14.2 7.5 30.8 10.1 46.6 7.4l3.6-0.7 0.3-0.1c38-8.7 62.6-45.6 56-84l-32-186.5c-1.3-7.8 1.2-15.7 6.9-21.2L908.3 470c11.5-11.2 19.1-26.1 21.4-42l0.4-3.6v-0.4c3.7-38.9-23.8-73.7-62.4-79.3zM341.8 603.8c2.2-12.6-2-25.5-11.2-34.4l-135.5-132c-7.1-6.9-3.2-19 6.6-20.5L389 389.7c12.7-1.8 23.6-9.8 29.3-21.3L502 198.8c4.4-8.9 17.1-8.9 21.5 0l83.7 169.6c5.7 11.5 16.6 19.4 29.3 21.3l187.2 27.2c9.8 1.4 13.8 13.5 6.6 20.5l-135.5 132c-9.2 9-13.3 21.8-11.2 34.4l32 186.4c1.7 9.8-8.6 17.3-17.4 12.6l-167.4-88c-11.3-6-24.9-6-36.2 0l-167.4 88c-8.8 4.6-19.1-2.8-17.4-12.6l32-186.4z"
-          p-id="7177" data-spm-anchor-id="a313x.7781069.0.i12"></path>
+          p-id="7177" data-spm-anchor-id="a313x.7781069.0.i12" fill="#ffffff"></path>
    <path d="M632.9 548.5c-3.6-13.5-14.3-24.1-27.9-27.6-13.6-3.5-28 0.6-37.7 10.7-12 12.2-28.7 19.1-45.8 19.1h-0.2c-17 0-33.6-6.9-45.6-19-15.2-15.2-39.8-15.2-55 0-15.2 15.2-15.2 39.8 0 55 26.5 26.6 63.1 41.8 100.6 41.8h0.4c37.7 0 74.5-15.4 101.1-42.2 9.8-9.8 13.7-24.3 10.1-37.8z"
          p-id="7178" data-spm-anchor-id="a313x.7781069.0.i10" fill="#d81e06"></path>
 </svg>
--- a/theme/default/icons/favorite-yes.svg
+++ b/theme/default/icons/favorite-yes.svg
--- a/theme/default/icons/favorite.svg
+++ b/theme/default/icons/favorite.svg
--- a/theme/default/icons/github.svg
+++ b/theme/default/icons/github.svg
--- a/theme/default/icons/history.svg
+++ b/theme/default/icons/history.svg
--- a/theme/default/icons/i18n.svg
+++ b/theme/default/icons/i18n.svg
--- a/theme/default/icons/input.svg
+++ b/theme/default/icons/input.svg
--- a/theme/default/icons/loading.svg
+++ b/theme/default/icons/loading.svg
--- a/theme/default/icons/refresh.svg
+++ b/theme/default/icons/refresh.svg
--- a/theme/default/icons/remove.svg
+++ b/theme/default/icons/remove.svg
--- a/theme/default/icons/setting.svg
+++ b/theme/default/icons/setting.svg
--- a/styles/icons/theme.svg
+++ b/styles/icons/theme.svg
@@ -0,0 +1,10 @@
+<svg t="1684490669117" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6100"
+     width="128" height="128">
+    <path d="M512 51.2a460.8 460.8 0 0 0 0 921.6c78.5408 0 133.12-40.0384 139.264-102.4 2.3552-23.6544-6.5536-44.9536-15.1552-65.6384-14.336-34.5088-24.6784-59.4944 9.216-93.2864s73.5232-27.4432 119.7056-20.48c29.7984 4.5056 60.416 9.0112 89.1904 1.2288C929.5872 672.0512 972.8 606.208 972.8 512A461.312 461.312 0 0 0 512 51.2z m331.3664 601.9072c-20.48 5.5296-45.568 1.8432-71.68-2.2528-47.4112-7.0656-106.496-15.9744-154.7264 31.9488-53.4528 53.248-33.0752 102.4-18.1248 138.1376a105.2672 105.2672 0 0 1 12.1856 45.8752C604.672 927.1296 533.6064 931.84 512 931.84a419.84 419.84 0 1 1 419.84-419.84c0 43.6224-11.4688 120.1152-88.4736 141.1072z"
+          p-id="6101"></path>
+    <path d="M235.52 512m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" p-id="6102"></path>
+    <path d="M307.2 337.92m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" p-id="6103"></path>
+    <path d="M471.04 245.76m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" p-id="6104"></path>
+    <path d="M655.36 276.48m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" p-id="6105"></path>
+    <path d="M778.24 419.84m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" p-id="6106"></path>
+</svg>
--- a/theme/default/icons/tooltip.svg
+++ b/theme/default/icons/tooltip.svg
--- a/theme/default/icons/translate.svg
+++ b/theme/default/icons/translate.svg
--- a/theme/default/icons/unflod.svg
+++ b/theme/default/icons/unflod.svg
--- a/theme/default/icons/use.svg
+++ b/theme/default/icons/use.svg
--- a/theme/default/icons/weight-braces-dec.svg
+++ b/theme/default/icons/weight-braces-dec.svg
--- a/theme/default/icons/weight-braces-inc.svg
+++ b/theme/default/icons/weight-braces-inc.svg
--- a/theme/default/icons/weight-brackets-dec.svg
+++ b/theme/default/icons/weight-brackets-dec.svg
--- a/theme/default/icons/weight-brackets-inc.svg
+++ b/theme/default/icons/weight-brackets-inc.svg
--- a/theme/default/icons/weight-parentheses-dec.svg
+++ b/theme/default/icons/weight-parentheses-dec.svg
--- a/theme/default/icons/weight-parentheses-inc.svg
+++ b/theme/default/icons/weight-parentheses-inc.svg
--- a/theme/default/icons/wrap.svg
+++ b/theme/default/icons/wrap.svg
--- a/src/src/main.less
+++ b/src/src/main.less
@@ -1,6 +1,3 @@
-@import "toastr/build/toastr.min.css";
-@import "tippy.js/dist/tippy.css";
-
 .hover-scale-120 {
    animation: all 0.3s;

@@ -20,6 +17,24 @@
@common-red: #d81e06;
@common-blue: #4a54ff;

+.set-icon-svg(@width: 20px, @height: 20px, @fill: none, @className: icon-svg) when (@fill=none) {
+    .@{className} svg {
+        width: @width;
+        height: @width;
+    }
+}
+
+.set-icon-svg(@width: 20px, @height: 20px, @fill: none, @className: icon-svg) when not (@fill=none) {
+    .@{className} svg {
+        width: @width;
+        height: @width;
+
+        path {
+            fill: @fill;
+        }
+    }
+}
+
 .common-popup-bg() {
    position: fixed;
    top: 0;
@@ -56,7 +71,7 @@
    position: absolute;
    right: -14px;
    top: -14px;
-    background: #ffffffe6;
+    background: rgba(255, 255, 255, .6);
    border-radius: 50%;
    box-shadow: 0 1px 5px 0 @common-red;
    cursor: pointer;
@@ -65,6 +80,8 @@
    &:hover {
        background: @common-red;
    }
+
+    .set-icon-svg(24px, 24px, #000, icon-svg-close);
 }

 .common-colourful-background() {
@@ -126,6 +143,8 @@
                &:hover {
                    box-shadow: 0 0 14px @common-blue;
                }
+
+                .set-icon-svg(24px, 24px, none, icon-svg-loading);
            }
        }
    }
@@ -185,7 +204,39 @@
        .prompt-unfold {
            cursor: pointer;
            margin-right: 2px;
-            animation: all .3s
+            animation: all .3s;
+        }
+
+        .prompt-unfold {
+            .set-icon-svg(20px, 20px, #02b7fd, icon-svg-unfold);
+        }
+
+        .extend-btn-item {
+            .set-icon-svg(18px, 18px, #d81e06, icon-svg-i18n);
+            .set-icon-svg(18px, 18px, #d81e06, icon-svg-setting);
+            .set-icon-svg(18px, 18px, #02b7fd, icon-svg-history);
+            .set-icon-svg(18px, 18px, #02b7fd, icon-svg-favorite);
+            .set-icon-svg(18px, 18px, #ad6800, icon-svg-translate);
+            .set-icon-svg(18px, 18px, #ad6800, icon-svg-english);
+            .set-icon-svg(18px, 18px, none, icon-svg-loading);
+            .set-icon-svg(18px, 18px, var(--body-text-color), icon-svg-copy);
+            .set-icon-svg(18px, 18px, #d81e06, icon-svg-remove);
+        }
+
+        .setting-box {
+            .set-icon-svg(26px, 26px, #d81e06, icon-svg-api);
+            .set-icon-svg(26px, 26px, #02b7fd, icon-svg-theme);
+            .set-icon-svg(26px, 26px, #ad6800, icon-svg-translate);
+            .set-icon-svg(26px, 26px, #ad6800, icon-svg-english);
+            .set-icon-svg(26px, 26px, #1f2937, icon-svg-tooltip);
+        }
+
+        .set-icon-svg(26px, 26px, var(--body-text-color), icon-svg-input);
+
+        .prompt-append-list {
+            .set-icon-svg(16px, 16px, #fff, icon-svg-wrap);
+            .set-icon-svg(16px, 16px, #fff, icon-svg-history);
+            .set-icon-svg(16px, 16px, #fff, icon-svg-favorite);
        }

        .prompt-header-title {
@@ -397,6 +448,31 @@
            }
        }

+        .prompt-tag-edit {
+            .set-icon-svg(16px, 16px, #02b7fd, icon-svg-wrap);
+        }
+
+        .btn-tag-delete {
+            .set-icon-svg(12px, 12px, #000, icon-svg-close);
+        }
+
+        .btn-tag-extend {
+            .set-icon-svg(20px, 20px, #ff6969, icon-svg-weight-parentheses-inc);
+            .set-icon-svg(20px, 20px, #ff6969, icon-svg-weight-parentheses-dec);
+            .set-icon-svg(20px, 20px, #84ff8f, icon-svg-weight-brackets-inc);
+            .set-icon-svg(20px, 20px, #84ff8f, icon-svg-weight-brackets-dec);
+            .set-icon-svg(20px, 20px, #ff9900, icon-svg-english);
+            .set-icon-svg(20px, 20px, none, icon-svg-loading);
+            .set-icon-svg(20px, 20px, #3c3c3c, icon-svg-copy);
+            .set-icon-svg(20px, 20px, #ff472f, icon-svg-disabled);
+            .set-icon-svg(20px, 20px, #2fff53, icon-svg-enable);
+        }
+
+        .prompt-local-language {
+            .set-icon-svg(16px, 16px, var(--body-text-color), icon-svg-translate);
+            .set-icon-svg(16px, 16px, none, icon-svg-loading);
+        }
+
        .prompt-tags-list {
            display: flex;
            flex-wrap: wrap;
@@ -891,6 +967,8 @@
                    font-weight: bold;
                    //background: center center @common-blue;
                }
+
+                .set-icon-svg(18px, 18px, #ff4a4a, icon-svg-remove);
            }

            .content-item {
@@ -920,6 +998,11 @@
                        justify-content: flex-start;
                        align-items: center;

+                        .set-icon-svg(20px, 20px, none, icon-svg-favorite-yes);
+                        .set-icon-svg(20px, 20px, none, icon-svg-favorite-no);
+                        .set-icon-svg(20px, 20px, #fff, icon-svg-copy);
+                        .set-icon-svg(20px, 20px, #fff, icon-svg-use);
+
                        > div {
                            margin-right: 10px;
                            font-size: 14px;
@@ -985,6 +1068,8 @@
            justify-content: center;
            align-items: center;

+            .set-icon-svg(64px, 64px, none, icon-svg-loading);
+
            span {
                font-size: 22px;
                color: #999;
@@ -1129,6 +1214,9 @@
                    justify-content: center;
                    align-items: center;
                    border-radius: 4px;
+
+                    .set-icon-svg(20px, 20px, none, icon-svg-loading);
+                    .set-icon-svg(20px, 20px, #02b7fd, icon-svg-refresh);
                }

                .test-input {
@@ -1144,6 +1232,8 @@
                    color: #fff;
                    background: #108bb5;
                    border-radius: 4px;
+
+                    .set-icon-svg(40px, 40px, none, icon-svg-loading);
                }

                .translate-error {
@@ -1211,4 +1301,94 @@
            }
        }
    }
+}
+
+.physton-prompt-extension-css {
+    .common-popup-bg();
+    justify-content: flex-end;
+    align-items: flex-end;
+    background: rgba(0, 0, 0, .2);
+
+    .extension-main {
+        height: 300px;
+        position: relative;
+        margin-right: 20px;
+        margin-bottom: 20px;
+
+        .extension-close {
+            .common-popup-close();
+        }
+
+        .extension-list {
+            height: 100%;
+            overflow: hidden;
+            overflow-y: scroll;
+            display: block;
+            position: relative;
+            box-shadow: 0 0 3px @common-blue;
+            border-radius: 6px 6px 4px 4px;
+            background-color: #1e1e1ee6;
+            transition: height .1s ease-in-out, width .1s ease-in-out;
+
+            .extension-item {
+                font-size: 14px;
+                color: #fff;
+                padding: 10px 20px;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+
+                .extension-checkbox{
+                    --ring-color: transparent;
+                    position: relative;
+                    box-shadow: var(--input-shadow);
+                    border: 1px solid var(--checkbox-border-color);
+                    border-radius: var(--checkbox-border-radius);
+                    background-color: var(--checkbox-background-color);
+                    line-height: var(--line-sm);
+                    width: 20px;
+                    height: 20px;
+
+                    &:checked {
+                        border-color: var(--checkbox-border-color-selected);
+                        background-image: var(--checkbox-check);
+                        background-color: var(--checkbox-background-color-selected)
+                    }
+                }
+
+                .extension-dir {
+                    margin-left: 10px;
+                    font-size: 14px;
+                }
+
+                .extension-name {
+                    margin-left: 5px;
+                    white-space: nowrap;
+                    font-size: 14px;
+                }
+
+                .extension-author {
+                    margin-left: 30px;
+                    flex: 1;
+                    text-align: right;
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+}
+
+
+body {
+    &.light {
+        // 浅色主题
+    }
+
+    &.dark {
+        // 深色主题
+        .physton-prompt .prompt-header .extend-btn-item {
+            .set-icon-svg(18px, 18px, #ff9900, icon-svg-translate);
+            .set-icon-svg(18px, 18px, #ff9900, icon-svg-english);
+        }
+    }
 }
--- a/styles/main.min.css
+++ b/styles/main.min.css
--- a/theme/default/icons/close.svg
+++ b/theme/default/icons/close.svg
@@ -1,5 +0,0 @@
-<svg t="1684461389739" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-     p-id="13800" width="128" height="128">
-    <path d="M79.573333 39.338667a42.666667 42.666667 0 0 1 60.330667 0l372.053333 372.096L884.096 39.338667a42.666667 42.666667 0 0 1 60.330667 0l40.234666 40.234666a42.666667 42.666667 0 0 1 0 60.330667L612.522667 512l372.138666 372.096a42.666667 42.666667 0 0 1 0 60.330667l-40.234666 40.234666a42.666667 42.666667 0 0 1-60.330667 0l-372.138667-372.096-372.053333 372.096a42.666667 42.666667 0 0 1-60.330667 0l-40.234666-40.234666a42.666667 42.666667 0 0 1 0-60.330667L411.392 512 39.381333 139.904a42.666667 42.666667 0 0 1 0-60.330667l40.234667-40.234666z"
-          fill="#2c2c2c" p-id="13801"></path>
-</svg>
				`@@ -0,0 +1 @@`
				`.physton-prompt .prompt-header .prompt-header-extend.prompt-append .extend-content .input-tag-append{width:calc(100% - 42px - 10px)}`
				`@@ -0,0 +1 @@`
				.physton-prompt .prompt-header .prompt-unfold{order:1}.physton-prompt .prompt-header .prompt-header-title{order:2}.physton-prompt .prompt-header .prompt-header-counter{order:3}.physton-prompt .prompt-header .prompt-header-extend{order:5}.physton-prompt .prompt-header .prompt-header-extend:nth-last-child(2){margin-right:0}.physton-prompt .prompt-header .prompt-header-extend.prompt-append{order:4;margin-right:10px}.physton-prompt .prompt-header .prompt-header-extend.prompt-append .extend-content{justify-content:flex-start}.physton-prompt .prompt-header .prompt-header-extend.prompt-append .extend-content .input-tag-append{order:-1;margin-right:10px}