Improve handling of the hostname url query

Also add related info into README

README.md

@@ -4,13 +4,24 @@
 
 > Yet Another [Clash](https://github.com/Dreamacro/clash) [Dashboard](https://github.com/Dreamacro/clash-dashboard)
 
+## Usage
+
 The site [http://yacd.haishan.me](http://yacd.haishan.me) is served with HTTP not HTTPS is because many browsers block requests to HTTP resources from a HTTPS website. If you think it's not safe, you could just download the [zip of the gh-pages](https://github.com/haishanh/yacd/archive/gh-pages.zip), unzip and serve those static files with a web server(like Nginx).
 
-Docker image
+**Docker image**
 
 - Docker Hub [`haishanh/yacd`](https://hub.docker.com/r/haishanh/yacd)
 - GitHub Container Registry [`ghcr.io/haishanh/yacd`](https://github.com/haishanh/yacd/pkgs/container/yacd)
 
+**Supported URL query params**
+
+| Param    | Description                                                                        |
+| -------- | ---------------------------------------------------------------------------------- |
+| hostname | Hostname of the clash backend API (usually the host part of `external-controller`) |
+| port     | Port of the clash backend API (usually the port part of `external-controller`)     |
+| secret   | Clash API secret (`secret` in your config.yaml)                                    |
+| theme    | UI color scheme (dark, light, auto)                                                |
+
 ## Development
 
 ```sh

src/store/app.ts

@@ -95,6 +95,7 @@ export function updateClashAPIConfig({ baseURL, secret }) {
 
 const rootEl = document.querySelector('html');
 type ThemeType = 'dark' | 'light' | 'auto';
+
 function setTheme(theme: ThemeType = 'dark') {
   if (theme === 'auto') {
     rootEl.setAttribute('data-theme', 'auto');
@@ -152,7 +153,7 @@ export function updateCollapsibleIsOpen(prefix: string, name: string, v: boolean
 const defaultClashAPIConfig = {
   baseURL: document.getElementById('app')?.getAttribute('data-base-url') ?? 'http://127.0.0.1:9090',
   secret: '',
-  addedAt: 0,
+  addedAt: 0
 };
 // type Theme = 'light' | 'dark';
 const defaultState: StateApp = {
@@ -169,7 +170,7 @@ const defaultState: StateApp = {
   proxySortBy: 'Natural',
   hideUnavailableProxies: false,
   autoCloseOldConns: false,
-  logStreamingPaused: false,
+  logStreamingPaused: false
 };
 
 function parseConfigQueryString() {
@@ -193,7 +194,11 @@ export function initialState() {
   if (conf) {
     const url = new URL(conf.baseURL);
     if (query.hostname) {
-      url.hostname = query.hostname;
+      if (query.hostname.indexOf('http') === 0) {
+        url.href = decodeURIComponent(query.hostname);
+      } else {
+        url.hostname = query.hostname;
+      }
     }
     if (query.port) {
       url.port = query.port;