initial fluent-widgets ui

examples/window/settings/config.py

@@ -0,0 +1,120 @@
+# coding:utf-8
+from enum import Enum
+
+from PySide6.QtCore import Qt, QLocale
+from PySide6.QtGui import QGuiApplication, QFont
+from qfluentwidgets import (qconfig, QConfig, ConfigItem, OptionsConfigItem, BoolValidator,
+                            ColorConfigItem, OptionsValidator, RangeConfigItem, RangeValidator,
+                            FolderListValidator, EnumSerializer, FolderValidator, ConfigSerializer, __version__)
+
+
+class SongQuality(Enum):
+    """ Online song quality enumeration class """
+
+    STANDARD = "Standard quality"
+    HIGH = "High quality"
+    SUPER = "Super quality"
+    LOSSLESS = "Lossless quality"
+
+
+class MvQuality(Enum):
+    """ MV quality enumeration class """
+
+    FULL_HD = "Full HD"
+    HD = "HD"
+    SD = "SD"
+    LD = "LD"
+
+
+class Language(Enum):
+    """ Language enumeration """
+
+    CHINESE_SIMPLIFIED = QLocale(QLocale.Chinese, QLocale.China)
+    CHINESE_TRADITIONAL = QLocale(QLocale.Chinese, QLocale.HongKong)
+    ENGLISH = QLocale(QLocale.English)
+    AUTO = QLocale()
+
+
+class LanguageSerializer(ConfigSerializer):
+    """ Language serializer """
+
+    def serialize(self, language):
+        return language.value.name() if language != Language.AUTO else "Auto"
+
+    def deserialize(self, value: str):
+        return Language(QLocale(value)) if value != "Auto" else Language.AUTO
+
+
+class Config(QConfig):
+    """ Config of application """
+
+    # folders
+    musicFolders = ConfigItem(
+        "Folders", "LocalMusic", [], FolderListValidator())
+    downloadFolder = ConfigItem(
+        "Folders", "Download", "download", FolderValidator())
+
+    # online
+    onlineSongQuality = OptionsConfigItem(
+        "Online", "SongQuality", SongQuality.STANDARD, OptionsValidator(SongQuality), EnumSerializer(SongQuality))
+    onlinePageSize = RangeConfigItem(
+        "Online", "PageSize", 30, RangeValidator(0, 50))
+    onlineMvQuality = OptionsConfigItem(
+        "Online", "MvQuality", MvQuality.FULL_HD, OptionsValidator(MvQuality), EnumSerializer(MvQuality))
+
+    # main window
+    enableAcrylicBackground = ConfigItem(
+        "MainWindow", "EnableAcrylicBackground", False, BoolValidator())
+    minimizeToTray = ConfigItem(
+        "MainWindow", "MinimizeToTray", True, BoolValidator())
+    playBarColor = ColorConfigItem("MainWindow", "PlayBarColor", "#225C7F")
+    recentPlaysNumber = RangeConfigItem(
+        "MainWindow", "RecentPlayNumbers", 300, RangeValidator(10, 300))
+    dpiScale = OptionsConfigItem(
+        "MainWindow", "DpiScale", "Auto", OptionsValidator([1, 1.25, 1.5, 1.75, 2, "Auto"]), restart=True)
+    language = OptionsConfigItem(
+        "MainWindow", "Language", Language.AUTO, OptionsValidator(Language), LanguageSerializer(), restart=True)
+
+    # desktop lyric
+    deskLyricHighlightColor = ColorConfigItem(
+        "DesktopLyric", "HighlightColor", "#0099BC")
+    deskLyricFontSize = RangeConfigItem(
+        "DesktopLyric", "FontSize", 50, RangeValidator(15, 50))
+    deskLyricStrokeSize = RangeConfigItem(
+        "DesktopLyric", "StrokeSize", 5, RangeValidator(0, 20))
+    deskLyricStrokeColor = ColorConfigItem(
+        "DesktopLyric", "StrokeColor", Qt.black)
+    deskLyricFontFamily = ConfigItem(
+        "DesktopLyric", "FontFamily", "Microsoft YaHei")
+    deskLyricAlignment = OptionsConfigItem(
+        "DesktopLyric", "Alignment", "Center", OptionsValidator(["Center", "Left", "Right"]))
+
+    # software update
+    checkUpdateAtStartUp = ConfigItem(
+        "Update", "CheckUpdateAtStartUp", True, BoolValidator())
+
+    @property
+    def desktopLyricFont(self):
+        """ get the desktop lyric font """
+        font = QFont(self.deskLyricFontFamily.value)
+        font.setPixelSize(self.deskLyricFontSize.value)
+        return font
+
+    @desktopLyricFont.setter
+    def desktopLyricFont(self, font: QFont):
+        dpi = QGuiApplication.primaryScreen().logicalDotsPerInch()
+        self.deskLyricFontFamily.value = font.family()
+        self.deskLyricFontSize.value = max(15, int(font.pointSize()*dpi/72))
+        self.save()
+
+
+YEAR = 2023
+AUTHOR = "zhiyiYo"
+VERSION = __version__
+HELP_URL = "https://pyqt-fluent-widgets.readthedocs.io"
+FEEDBACK_URL = "https://github.com/zhiyiYo/PyQt-Fluent-Widgets/issues"
+RELEASE_URL = "https://github.com/zhiyiYo/PyQt-Fluent-Widgets/releases/latest"
+
+
+cfg = Config()
+qconfig.load('config/config.json', cfg)

examples/window/settings/demo.py

@@ -0,0 +1,66 @@
+# coding:utf-8
+import os
+import sys
+from PySide6.QtCore import Qt, QLocale, QTranslator
+from PySide6.QtGui import QIcon, QColor
+from PySide6.QtWidgets import QApplication, QHBoxLayout
+
+from qframelesswindow import FramelessWindow, StandardTitleBar
+from qfluentwidgets import isDarkTheme, FluentTranslator
+from setting_interface import SettingInterface
+from config import cfg, Language
+
+
+
+class Window(FramelessWindow):
+
+    def __init__(self, parent=None):
+        super().__init__(parent=parent)
+        self.setTitleBar(StandardTitleBar(self))
+
+        self.hBoxLayout = QHBoxLayout(self)
+        self.settingInterface = SettingInterface(self)
+        self.hBoxLayout.setContentsMargins(0, 0, 0, 0)
+        self.hBoxLayout.addWidget(self.settingInterface)
+
+        self.setWindowIcon(QIcon(":/qfluentwidgets/images/logo.png"))
+        self.setWindowTitle("PySide6-Fluent-Widgets")
+
+        self.resize(1080, 784)
+        desktop = QApplication.primaryScreen().size()
+        w, h = desktop.width(), desktop.height()
+        self.move(w//2 - self.width()//2, h//2 - self.height()//2)
+
+        self.titleBar.raise_()
+
+        self.setQss()
+        cfg.themeChanged.connect(self.setQss)
+
+    def setQss(self):
+        theme = 'dark' if isDarkTheme() else 'light'
+        with open(f'resource/qss/{theme}/demo.qss', encoding='utf-8') as f:
+            self.setStyleSheet(f.read())
+
+
+if __name__ == '__main__':
+    # enable dpi scale
+    if cfg.get(cfg.dpiScale) != "Auto":
+        os.environ["QT_ENABLE_HIGHDPI_SCALING"] = "0"
+        os.environ["QT_SCALE_FACTOR"] = str(cfg.get(cfg.dpiScale))
+
+    app = QApplication(sys.argv)
+    app.setAttribute(Qt.ApplicationAttribute.AA_DontCreateNativeWidgetSiblings)
+
+    # internationalization
+    locale = cfg.get(cfg.language).value
+    fluentTranslator = FluentTranslator(locale)
+    settingTranslator = QTranslator()
+    settingTranslator.load(locale, "settings", ".", "resource/i18n")
+
+    app.installTranslator(fluentTranslator)
+    app.installTranslator(settingTranslator)
+
+    # create main window
+    w = Window()
+    w.show()
+    app.exec()

examples/window/settings/resource/i18n/settings.zh_CN.ts

@@ -0,0 +1,240 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE TS>
+<TS version="2.1" language="zh_CN">
+<context>
+    <name>SettingInterface</name>
+    <message>
+        <source>Settings</source>
+        <translation>设置</translation>
+    </message>
+    <message>
+        <source>Music on this PC</source>
+        <translation>此 PC 上的音乐</translation>
+    </message>
+    <message>
+        <source>Local music library</source>
+        <translation>本地音乐库</translation>
+    </message>
+    <message>
+        <source>Choose folder</source>
+        <translation>选择文件夹</translation>
+    </message>
+    <message>
+        <source>Download directory</source>
+        <translation>下载目录</translation>
+    </message>
+    <message>
+        <source>Personalization</source>
+        <translation>个性化</translation>
+    </message>
+    <message>
+        <source>Use Acrylic effect</source>
+        <translation>启用亚克力效果</translation>
+    </message>
+    <message>
+        <source>Acrylic effect has better visual experience, but it may cause the window to become stuck</source>
+        <translation>亚克力效果的视觉体验更好，但可能导致窗口卡顿</translation>
+    </message>
+    <message>
+        <source>Application theme</source>
+        <translation>应用主题</translation>
+    </message>
+    <message>
+        <source>Theme color</source>
+        <translation>主题色</translation>
+    </message>
+    <message>
+        <source>Change the theme color of you application</source>
+        <translation>调整你的应用主题颜色</translation>
+    </message>
+    <message>
+        <source>Change the appearance of your application</source>
+        <translation>调整你的应用外观</translation>
+    </message>
+    <message>
+        <source>Light</source>
+        <translation>浅色</translation>
+    </message>
+    <message>
+        <source>Dark</source>
+        <translation>深色</translation>
+    </message>
+    <message>
+        <source>Use system setting</source>
+        <translation>跟随系统设置</translation>
+    </message>
+    <message>
+        <source>Interface zoom</source>
+        <translation>界面缩放</translation>
+    </message>
+    <message>
+        <source>Change the size of widgets and fonts</source>
+        <translation>调整组件和字体的大小</translation>
+    </message>
+    <message>
+        <source>Language</source>
+        <translation>语言</translation>
+    </message>
+    <message>
+        <source>Set your preferred language for UI</source>
+        <translation>选择界面所使用的语言</translation>
+    </message>
+    <message>
+        <source>Online Music</source>
+        <translation>在线音乐</translation>
+    </message>
+    <message>
+        <source>Number of online music displayed on each page</source>
+        <translation>每页显示的在线歌曲数量</translation>
+    </message>
+    <message>
+        <source>Online music quality</source>
+        <translation>在线播放音质</translation>
+    </message>
+    <message>
+        <source>Standard quality</source>
+        <translation>流畅</translation>
+    </message>
+    <message>
+        <source>High quality</source>
+        <translation>高品</translation>
+    </message>
+    <message>
+        <source>Super quality</source>
+        <translation>超品</translation>
+    </message>
+    <message>
+        <source>Lossless quality</source>
+        <translation>无损</translation>
+    </message>
+    <message>
+        <source>Online MV quality</source>
+        <translation>在线 MV 画质</translation>
+    </message>
+    <message>
+        <source>Full HD</source>
+        <translation>超清</translation>
+    </message>
+    <message>
+        <source>HD</source>
+        <translation>高清</translation>
+    </message>
+    <message>
+        <source>SD</source>
+        <translation>标清</translation>
+    </message>
+    <message>
+        <source>LD</source>
+        <translation>流畅</translation>
+    </message>
+    <message>
+        <source>Desktop Lyric</source>
+        <translation>桌面歌词</translation>
+    </message>
+    <message>
+        <source>Choose font</source>
+        <translation>选择字体</translation>
+    </message>
+    <message>
+        <source>Font</source>
+        <translation>字体</translation>
+    </message>
+    <message>
+        <source>Foreground color</source>
+        <translation>前景色</translation>
+    </message>
+    <message>
+        <source>Background color</source>
+        <translation>背景色</translation>
+    </message>
+    <message>
+        <source>Stroke color</source>
+        <translation>描边色</translation>
+    </message>
+    <message>
+        <source>Stroke size</source>
+        <translation>描边大小</translation>
+    </message>
+    <message>
+        <source>Alignment</source>
+        <translation>对齐方式</translation>
+    </message>
+    <message>
+        <source>Center aligned</source>
+        <translation>居中对齐</translation>
+    </message>
+    <message>
+        <source>Left aligned</source>
+        <translation>左对齐</translation>
+    </message>
+    <message>
+        <source>Right aligned</source>
+        <translation>右对齐</translation>
+    </message>
+    <message>
+        <source>Main Panel</source>
+        <translation>主面板</translation>
+    </message>
+    <message>
+        <source>Minimize to tray after closing</source>
+        <translation>关闭后最小化到托盘</translation>
+    </message>
+    <message>
+        <source>PyQt-Fluent-Widgets will continue to run in the background</source>
+        <translation>PyQt-Fluent-Widgets 将在后台继续运行</translation>
+    </message>
+    <message>
+        <location filename="../../View/setting_interface/setting_interface.py" line="156"/>
+        <source>Software update</source>
+        <translation>软件更新</translation>
+    </message>
+    <message>
+        <source>Check for updates when the application starts</source>
+        <translation>在应用程序启动时检查更新</translation>
+    </message>
+        <message>
+        <source>The new version will be more stable and have more features</source>
+        <translation>新版本将更加稳定并拥有更多功能（建议启用此选项）</translation>
+    </message>
+    <message>
+        <source>About</source>
+        <translation>关于</translation>
+    </message>
+    <message>
+        <source>Open help page</source>
+        <translation>打开帮助页面</translation>
+    </message>
+    <message>
+        <source>Discover new features and learn useful tips about PyQt-Fluent-Widgets</source>
+        <translation>发现新功能并了解有关 PyQt-Fluent-Widgets 的使用技巧</translation>
+    </message>
+    <message>
+        <source>Provide feedback</source>
+        <translation>提供反馈</translation>
+    </message>
+    <message>
+        <source>Help us improve PyQt-Fluent-Widgets by providing feedback</source>
+        <translation>通过提供反馈帮助我们改进 PyQt-Fluent-Widgets</translation>
+    </message>
+    <message>
+        <source>Check update</source>
+        <translation>检查更新</translation>
+    </message>
+    <message>
+        <source>Copyright</source>
+        <translation>版权所有</translation>
+    </message>
+    <message>
+        <source>Version</source>
+        <translation>当前版本</translation>
+    </message>
+    <message>
+        <source>Configuration updated successfully</source>
+        <translation>配置更新成功</translation>
+    </message>
+    <message>
+        <source>Configuration takes effect after restart</source>
+        <translation>配置在重启软件后生效</translation>
+    </message>
+</context>
+</TS>

examples/window/settings/resource/i18n/settings.zh_HK.ts

@@ -0,0 +1,241 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE TS>
+<TS version="2.1" language="zh_HK">
+    <context>
+        <name>SettingInterface</name>
+        <message>
+            <source>Settings</source>
+            <translation>設置</translation>
+        </message>
+        <message>
+            <source>Music on this PC</source>
+            <translation>此 PC 上的音樂</translation>
+        </message>
+        <message>
+            <source>Local music library</source>
+            <translation>本地音樂庫</translation>
+        </message>
+        <message>
+            <source>Choose folder</source>
+            <translation>選擇文件夾</translation>
+        </message>
+        <message>
+            <source>Download directory</source>
+            <translation>下載目錄</translation>
+        </message>
+        <message>
+            <source>Personalization</source>
+            <translation>個性化</translation>
+        </message>
+        <message>
+            <source>Use Acrylic effect</source>
+            <translation>啟用亞克力效果</translation>
+        </message>
+        <message>
+            <source>Acrylic effect has better visual experience, but it may cause the window to
+                become stuck</source>
+            <translation>亞克力效果的視覺體驗更好，但可能導致窗口卡頓</translation>
+        </message>
+        <message>
+            <source>Application theme</source>
+            <translation>應用主題</translation>
+        </message>
+        <message>
+            <source>Theme color</source>
+            <translation>主題色</translation>
+        </message>
+        <message>
+            <source>Change the theme color of you application</source>
+            <translation>調整你的應用主題顏色</translation>
+        </message>
+        <message>
+            <source>Change the appearance of your application</source>
+            <translation>調整你的應用外觀</translation>
+        </message>
+        <message>
+            <source>Light</source>
+            <translation>淺色</translation>
+        </message>
+        <message>
+            <source>Dark</source>
+            <translation>深色</translation>
+        </message>
+        <message>
+            <source>Use system setting</source>
+            <translation>跟隨系統設置</translation>
+        </message>
+        <message>
+            <source>Interface zoom</source>
+            <translation>界面縮放</translation>
+        </message>
+        <message>
+            <source>Change the size of widgets and fonts</source>
+            <translation>調整組件和字體的大小</translation>
+        </message>
+        <message>
+            <source>Language</source>
+            <translation>語言</translation>
+        </message>
+        <message>
+            <source>Set your preferred language for UI</source>
+            <translation>選擇界面所使用的語言</translation>
+        </message>
+        <message>
+            <source>Online Music</source>
+            <translation>在線音樂</translation>
+        </message>
+        <message>
+            <source>Number of online music displayed on each page</source>
+            <translation>每頁顯示的在線歌曲數量</translation>
+        </message>
+        <message>
+            <source>Online music quality</source>
+            <translation>在線播放音質</translation>
+        </message>
+        <message>
+            <source>Standard quality</source>
+            <translation>流暢</translation>
+        </message>
+        <message>
+            <source>High quality</source>
+            <translation>高品</translation>
+        </message>
+        <message>
+            <source>Super quality</source>
+            <translation>超品</translation>
+        </message>
+        <message>
+            <source>Lossless quality</source>
+            <translation>無損</translation>
+        </message>
+        <message>
+            <source>Online MV quality</source>
+            <translation>在線 MV 畫質</translation>
+        </message>
+        <message>
+            <source>Full HD</source>
+            <translation>超清</translation>
+        </message>
+        <message>
+            <source>HD</source>
+            <translation>高清</translation>
+        </message>
+        <message>
+            <source>SD</source>
+            <translation>標清</translation>
+        </message>
+        <message>
+            <source>LD</source>
+            <translation>流暢</translation>
+        </message>
+        <message>
+            <source>Desktop Lyric</source>
+            <translation>桌面歌詞</translation>
+        </message>
+        <message>
+            <source>Choose font</source>
+            <translation>選擇字體</translation>
+        </message>
+        <message>
+            <source>Font</source>
+            <translation>字體</translation>
+        </message>
+        <message>
+            <source>Foreground color</source>
+            <translation>前景色</translation>
+        </message>
+        <message>
+            <source>Background color</source>
+            <translation>背景色</translation>
+        </message>
+        <message>
+            <source>Stroke color</source>
+            <translation>描邊色</translation>
+        </message>
+        <message>
+            <source>Stroke size</source>
+            <translation>描邊大小</translation>
+        </message>
+        <message>
+            <source>Alignment</source>
+            <translation>對齊方式</translation>
+        </message>
+        <message>
+            <source>Center aligned</source>
+            <translation>居中對齊</translation>
+        </message>
+        <message>
+            <source>Left aligned</source>
+            <translation>左對齊</translation>
+        </message>
+        <message>
+            <source>Right aligned</source>
+            <translation>右對齊</translation>
+        </message>
+        <message>
+            <source>Main Panel</source>
+            <translation>主面板</translation>
+        </message>
+        <message>
+            <source>Minimize to tray after closing</source>
+            <translation>關閉後最小化到托盤</translation>
+        </message>
+        <message>
+            <source>PyQt-Fluent-Widgets will continue to run in the background</source>
+            <translation>PyQt-Fluent-Widgets 將在後臺繼續運行</translation>
+        </message>
+        <message>
+            <location filename="../../View/setting_interface/setting_interface.py" line="156" />
+            <source>Software update</source>
+            <translation>軟件更新</translation>
+        </message>
+        <message>
+            <source>Check for updates when the application starts</source>
+            <translation>在應用程序啟動時檢查更新</translation>
+        </message>
+        <message>
+            <source>The new version will be more stable and have more features</source>
+            <translation>新版本將更加穩定並擁有更多功能（建議啟用此選項）</translation>
+        </message>
+        <message>
+            <source>About</source>
+            <translation>關於</translation>
+        </message>
+        <message>
+            <source>Open help page</source>
+            <translation>打開幫助頁面</translation>
+        </message>
+        <message>
+            <source>Discover new features and learn useful tips about PyQt-Fluent-Widgets</source>
+            <translation>發現新功能並了解有關 PyQt-Fluent-Widgets 的使用技巧</translation>
+        </message>
+        <message>
+            <source>Provide feedback</source>
+            <translation>提供反饋</translation>
+        </message>
+        <message>
+            <source>Help us improve PyQt-Fluent-Widgets by providing feedback</source>
+            <translation>通過提供反饋幫助我們改進 PyQt-Fluent-Widgets</translation>
+        </message>
+        <message>
+            <source>Check update</source>
+            <translation>檢查更新</translation>
+        </message>
+        <message>
+            <source>Copyright</source>
+            <translation>版權所有</translation>
+        </message>
+        <message>
+            <source>Version</source>
+            <translation>當前版本</translation>
+        </message>
+        <message>
+            <source>Configuration updated successfully</source>
+            <translation>配置更新成功</translation>
+        </message>
+        <message>
+            <source>Configuration takes effect after restart</source>
+            <translation>配置在重啟軟件後生效</translation>
+        </message>
+    </context>
+</TS>

examples/window/settings/resource/qss/dark/demo.qss

@@ -0,0 +1,27 @@
+MinimizeButton {
+    qproperty-normalColor: white;
+    qproperty-normalBackgroundColor: transparent;
+    qproperty-hoverColor: white;
+    qproperty-hoverBackgroundColor: rgba(255, 255, 255, 26);
+    qproperty-pressedColor: white;
+    qproperty-pressedBackgroundColor: rgba(255, 255, 255, 51)
+}
+
+
+MaximizeButton {
+    qproperty-normalColor: white;
+    qproperty-normalBackgroundColor: transparent;
+    qproperty-hoverColor: white;
+    qproperty-hoverBackgroundColor: rgba(255, 255, 255, 26);
+    qproperty-pressedColor: white;
+    qproperty-pressedBackgroundColor: rgba(255, 255, 255, 51)
+}
+
+CloseButton {
+    qproperty-normalColor: white;
+    qproperty-normalBackgroundColor: transparent;
+}
+
+StandardTitleBar > QLabel {
+    color: white;
+}

examples/window/settings/resource/qss/dark/setting_interface.qss

@@ -0,0 +1,17 @@
+SettingInterface, #scrollWidget {
+    background-color: rgb(39, 39, 39);
+}
+
+QScrollArea {
+    border: none;
+    background-color: rgb(39, 39, 39);
+}
+
+
+/* 标签 */
+QLabel#settingLabel {
+    font: 33px 'Microsoft YaHei Light';
+    background-color: transparent;
+    color: white;
+}
+

examples/window/settings/resource/qss/light/demo.qss

@@ -0,0 +1,23 @@
+MinimizeButton {
+    qproperty-normalColor: black;
+    qproperty-normalBackgroundColor: transparent;
+    qproperty-hoverColor: black;
+    qproperty-hoverBackgroundColor: rgba(0, 0, 0, 26);
+    qproperty-pressedColor: black;
+    qproperty-pressedBackgroundColor: rgba(0, 0, 0, 51)
+}
+
+
+MaximizeButton {
+    qproperty-normalColor: black;
+    qproperty-normalBackgroundColor: transparent;
+    qproperty-hoverColor: black;
+    qproperty-hoverBackgroundColor: rgba(0, 0, 0, 26);
+    qproperty-pressedColor: black;
+    qproperty-pressedBackgroundColor: rgba(0, 0, 0, 51)
+}
+
+CloseButton {
+    qproperty-normalColor: black;
+    qproperty-normalBackgroundColor: transparent;
+}

examples/window/settings/resource/qss/light/setting_interface.qss

@@ -0,0 +1,16 @@
+SettingInterface, #scrollWidget {
+    background-color: rgb(249, 249, 249);
+}
+
+QScrollArea {
+    background-color: rgb(249, 249, 249);
+    border: none;
+}
+
+
+/* 标签 */
+QLabel#settingLabel {
+    font: 33px 'Microsoft YaHei Light';
+    background-color: transparent;
+}
+

examples/window/settings/setting_interface.py

@@ -0,0 +1,333 @@
+# coding:utf-8
+from config import cfg, HELP_URL, FEEDBACK_URL, AUTHOR, VERSION, YEAR
+from qfluentwidgets import (SettingCardGroup, SwitchSettingCard, FolderListSettingCard,
+                            OptionsSettingCard, RangeSettingCard, PushSettingCard,
+                            ColorSettingCard, HyperlinkCard, PrimaryPushSettingCard, ScrollArea,
+                            ComboBoxSettingCard, ExpandLayout, Theme, InfoBar, CustomColorSettingCard,
+                            setTheme, setThemeColor, isDarkTheme)
+from qfluentwidgets import FluentIcon as FIF
+from PySide6.QtCore import Qt, Signal, QUrl, QStandardPaths
+from PySide6.QtGui import QDesktopServices
+from PySide6.QtWidgets import QWidget, QLabel, QFontDialog, QFileDialog
+
+
+class SettingInterface(ScrollArea):
+    """ Setting interface """
+
+    checkUpdateSig = Signal()
+    musicFoldersChanged = Signal(list)
+    acrylicEnableChanged = Signal(bool)
+    downloadFolderChanged = Signal(str)
+    minimizeToTrayChanged = Signal(bool)
+
+    def __init__(self, parent=None):
+        super().__init__(parent=parent)
+        self.scrollWidget = QWidget()
+        self.expandLayout = ExpandLayout(self.scrollWidget)
+
+        # setting label
+        self.settingLabel = QLabel(self.tr("Settings"), self)
+
+        # music folders
+        self.musicInThisPCGroup = SettingCardGroup(
+            self.tr("Music on this PC"), self.scrollWidget)
+        self.musicFolderCard = FolderListSettingCard(
+            cfg.musicFolders,
+            self.tr("Local music library"),
+            directory=QStandardPaths.writableLocation(QStandardPaths.MusicLocation),
+            parent=self.musicInThisPCGroup
+        )
+        self.downloadFolderCard = PushSettingCard(
+            self.tr('Choose folder'),
+            FIF.DOWNLOAD,
+            self.tr("Download directory"),
+            cfg.get(cfg.downloadFolder),
+            self.musicInThisPCGroup
+        )
+
+        # personalization
+        self.personalGroup = SettingCardGroup(self.tr('Personalization'), self.scrollWidget)
+        self.enableAcrylicCard = SwitchSettingCard(
+            FIF.TRANSPARENT,
+            self.tr("Use Acrylic effect"),
+            self.tr("Acrylic effect has better visual experience, but it may cause the window to become stuck"),
+            configItem=cfg.enableAcrylicBackground,
+            parent=self.personalGroup
+        )
+        self.themeCard = OptionsSettingCard(
+            cfg.themeMode,
+            FIF.BRUSH,
+            self.tr('Application theme'),
+            self.tr("Change the appearance of your application"),
+            texts=[
+                self.tr('Light'), self.tr('Dark'),
+                self.tr('Use system setting')
+            ],
+            parent=self.personalGroup
+        )
+        self.themeColorCard=CustomColorSettingCard(
+            cfg.themeColor,
+            FIF.PALETTE,
+            self.tr('Theme color'),
+            self.tr('Change the theme color of you application'),
+            self.personalGroup
+        )
+        self.zoomCard = OptionsSettingCard(
+            cfg.dpiScale,
+            FIF.ZOOM,
+            self.tr("Interface zoom"),
+            self.tr("Change the size of widgets and fonts"),
+            texts=[
+                "100%", "125%", "150%", "175%", "200%",
+                self.tr("Use system setting")
+            ],
+            parent=self.personalGroup
+        )
+        self.languageCard = ComboBoxSettingCard(
+            cfg.language,
+            FIF.LANGUAGE,
+            self.tr('Language'),
+            self.tr('Set your preferred language for UI'),
+            texts=['简体中文', '繁體中文', 'English', self.tr('Use system setting')],
+            parent=self.personalGroup
+        )
+
+        # online music
+        self.onlineMusicGroup = SettingCardGroup(self.tr('Online Music'), self.scrollWidget)
+        self.onlinePageSizeCard = RangeSettingCard(
+            cfg.onlinePageSize,
+            FIF.SEARCH,
+            self.tr("Number of online music displayed on each page"),
+            parent=self.onlineMusicGroup
+        )
+        self.onlineMusicQualityCard = OptionsSettingCard(
+            cfg.onlineSongQuality,
+            FIF.MUSIC,
+            self.tr('Online music quality'),
+            texts=[
+                self.tr('Standard quality'), self.tr('High quality'),
+                self.tr('Super quality'), self.tr('Lossless quality')
+            ],
+            parent=self.onlineMusicGroup
+        )
+        self.onlineMvQualityCard = OptionsSettingCard(
+            cfg.onlineMvQuality,
+            FIF.VIDEO,
+            self.tr('Online MV quality'),
+            texts=[
+                self.tr('Full HD'), self.tr('HD'),
+                self.tr('SD'), self.tr('LD')
+            ],
+            parent=self.onlineMusicGroup
+        )
+
+        # desktop lyric
+        self.deskLyricGroup = SettingCardGroup(self.tr('Desktop Lyric'), self.scrollWidget)
+        self.deskLyricFontCard = PushSettingCard(
+            self.tr('Choose font'),
+            FIF.FONT,
+            self.tr('Font'),
+            parent=self.deskLyricGroup
+        )
+        self.deskLyricHighlightColorCard = ColorSettingCard(
+            cfg.deskLyricHighlightColor,
+            FIF.PALETTE,
+            self.tr('Foreground color'),
+            parent=self.deskLyricGroup
+        )
+        self.deskLyricStrokeColorCard = ColorSettingCard(
+            cfg.deskLyricStrokeColor,
+            FIF.PENCIL_INK,
+            self.tr('Stroke color'),
+            parent=self.deskLyricGroup
+        )
+        self.deskLyricStrokeSizeCard = RangeSettingCard(
+            cfg.deskLyricStrokeSize,
+            FIF.HIGHTLIGHT,
+            self.tr('Stroke size'),
+            parent=self.deskLyricGroup
+        )
+        self.deskLyricAlignmentCard = OptionsSettingCard(
+            cfg.deskLyricAlignment,
+            FIF.ALIGNMENT,
+            self.tr('Alignment'),
+            texts=[
+                self.tr('Center aligned'), self.tr('Left aligned'),
+                self.tr('Right aligned')
+            ],
+            parent=self.deskLyricGroup
+        )
+
+        # main panel
+        self.mainPanelGroup = SettingCardGroup(self.tr('Main Panel'), self.scrollWidget)
+        self.minimizeToTrayCard = SwitchSettingCard(
+            FIF.MINIMIZE,
+            self.tr('Minimize to tray after closing'),
+            self.tr('PyQt-Fluent-Widgets will continue to run in the background'),
+            configItem=cfg.minimizeToTray,
+            parent=self.mainPanelGroup
+        )
+
+        # update software
+        self.updateSoftwareGroup = SettingCardGroup(self.tr("Software update"), self.scrollWidget)
+        self.updateOnStartUpCard = SwitchSettingCard(
+            FIF.UPDATE,
+            self.tr('Check for updates when the application starts'),
+            self.tr('The new version will be more stable and have more features'),
+            configItem=cfg.checkUpdateAtStartUp,
+            parent=self.updateSoftwareGroup
+        )
+
+        # application
+        self.aboutGroup = SettingCardGroup(self.tr('About'), self.scrollWidget)
+        self.helpCard = HyperlinkCard(
+            HELP_URL,
+            self.tr('Open help page'),
+            FIF.HELP,
+            self.tr('Help'),
+            self.tr('Discover new features and learn useful tips about PyQt-Fluent-Widgets'),
+            self.aboutGroup
+        )
+        self.feedbackCard = PrimaryPushSettingCard(
+            self.tr('Provide feedback'),
+            FIF.FEEDBACK,
+            self.tr('Provide feedback'),
+            self.tr('Help us improve PyQt-Fluent-Widgets by providing feedback'),
+            self.aboutGroup
+        )
+        self.aboutCard = PrimaryPushSettingCard(
+            self.tr('Check update'),
+            FIF.INFO,
+            self.tr('About'),
+            '© ' + self.tr('Copyright') + f" {YEAR}, {AUTHOR}. " +
+            self.tr('Version') + f" {VERSION}",
+            self.aboutGroup
+        )
+
+        self.__initWidget()
+
+    def __initWidget(self):
+        self.resize(1000, 800)
+        self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
+        self.setViewportMargins(0, 120, 0, 20)
+        self.setWidget(self.scrollWidget)
+        self.setWidgetResizable(True)
+
+        # initialize style sheet
+        self.__setQss()
+
+        # initialize layout
+        self.__initLayout()
+        self.__connectSignalToSlot()
+
+    def __initLayout(self):
+        self.settingLabel.move(60, 63)
+
+        # add cards to group
+        self.musicInThisPCGroup.addSettingCard(self.musicFolderCard)
+        self.musicInThisPCGroup.addSettingCard(self.downloadFolderCard)
+
+        self.personalGroup.addSettingCard(self.enableAcrylicCard)
+        self.personalGroup.addSettingCard(self.themeCard)
+        self.personalGroup.addSettingCard(self.themeColorCard)
+        self.personalGroup.addSettingCard(self.zoomCard)
+        self.personalGroup.addSettingCard(self.languageCard)
+
+        self.onlineMusicGroup.addSettingCard(self.onlinePageSizeCard)
+        self.onlineMusicGroup.addSettingCard(self.onlineMusicQualityCard)
+        self.onlineMusicGroup.addSettingCard(self.onlineMvQualityCard)
+
+        self.deskLyricGroup.addSettingCard(self.deskLyricFontCard)
+        self.deskLyricGroup.addSettingCard(self.deskLyricHighlightColorCard)
+        self.deskLyricGroup.addSettingCard(self.deskLyricStrokeColorCard)
+        self.deskLyricGroup.addSettingCard(self.deskLyricStrokeSizeCard)
+        self.deskLyricGroup.addSettingCard(self.deskLyricAlignmentCard)
+
+        self.updateSoftwareGroup.addSettingCard(self.updateOnStartUpCard)
+
+        self.mainPanelGroup.addSettingCard(self.minimizeToTrayCard)
+
+        self.aboutGroup.addSettingCard(self.helpCard)
+        self.aboutGroup.addSettingCard(self.feedbackCard)
+        self.aboutGroup.addSettingCard(self.aboutCard)
+
+        # add setting card group to layout
+        self.expandLayout.setSpacing(28)
+        self.expandLayout.setContentsMargins(60, 10, 60, 0)
+        self.expandLayout.addWidget(self.musicInThisPCGroup)
+        self.expandLayout.addWidget(self.personalGroup)
+        self.expandLayout.addWidget(self.onlineMusicGroup)
+        self.expandLayout.addWidget(self.deskLyricGroup)
+        self.expandLayout.addWidget(self.mainPanelGroup)
+        self.expandLayout.addWidget(self.updateSoftwareGroup)
+        self.expandLayout.addWidget(self.aboutGroup)
+
+    def __setQss(self):
+        """ set style sheet """
+        self.scrollWidget.setObjectName('scrollWidget')
+        self.settingLabel.setObjectName('settingLabel')
+
+        theme = 'dark' if isDarkTheme() else 'light'
+        with open(f'resource/qss/{theme}/setting_interface.qss', encoding='utf-8') as f:
+            self.setStyleSheet(f.read())
+
+    def __showRestartTooltip(self):
+        """ show restart tooltip """
+        InfoBar.warning(
+            '',
+            self.tr('Configuration takes effect after restart'),
+            parent=self.window()
+        )
+
+    def __onDeskLyricFontCardClicked(self):
+        """ desktop lyric font button clicked slot """
+        isOk, font = QFontDialog.getFont(
+            cfg.desktopLyricFont, self.window(), self.tr("Choose font"))
+        if isOk:
+            cfg.desktopLyricFont = font
+
+    def __onDownloadFolderCardClicked(self):
+        """ download folder card clicked slot """
+        folder = QFileDialog.getExistingDirectory(
+            self, self.tr("Choose folder"), "./")
+        if not folder or cfg.get(cfg.downloadFolder) == folder:
+            return
+
+        cfg.set(cfg.downloadFolder, folder)
+        self.downloadFolderCard.setContent(folder)
+
+    def __onThemeChanged(self, theme: Theme):
+        """ theme changed slot """
+        # change the theme of qfluentwidgets
+        setTheme(theme)
+
+        # chang the theme of setting interface
+        self.__setQss()
+
+    def __connectSignalToSlot(self):
+        """ connect signal to slot """
+        cfg.appRestartSig.connect(self.__showRestartTooltip)
+        cfg.themeChanged.connect(self.__onThemeChanged)
+
+        # music in the pc
+        self.musicFolderCard.folderChanged.connect(
+            self.musicFoldersChanged)
+        self.downloadFolderCard.clicked.connect(
+            self.__onDownloadFolderCardClicked)
+
+        # personalization
+        self.enableAcrylicCard.checkedChanged.connect(
+            self.acrylicEnableChanged)
+        self.themeColorCard.colorChanged.connect(setThemeColor)
+
+        # playing interface
+        self.deskLyricFontCard.clicked.connect(self.__onDeskLyricFontCardClicked)
+
+        # main panel
+        self.minimizeToTrayCard.checkedChanged.connect(
+            self.minimizeToTrayChanged)
+
+        # about
+        self.aboutCard.clicked.connect(self.checkUpdateSig)
+        self.feedbackCard.clicked.connect(
+            lambda: QDesktopServices.openUrl(QUrl(FEEDBACK_URL)))