Про интерфейс ОС
Я уже много раз писал о том, что лучший способ быстрее стать хорошим программистом — это всё время что-нибудь программировать.
Сегодня хочу рассказать про очередной проект «в стол» или нет?, на этот раз про интерфейс ПК.
Во многих играх, где действие происходит в современности или будущем можно подойти к компьютеру на чужом рабочем столе и, подобрав пароль или взломав оный, получить там какую-то информацию, прочитать переписку или, например, выключить систему безопасности, видеонаблюдения, турели, ловушки и т.д. И практически абсолютно всегда этот интерфейс настолько далек от действительности, что даже грустно.
Особенно актуально для квестов, где новый код от двери написал человеку в почту добрый инженер, а галерее лежит фотка любимой собаки, при этом имя файла совпадает с паролем от сейфа, стоящего рядом.
Но если в играх ещё как-то этим можно пользоваться с горем пополам, то в кино вообще показывают на экранах такую дичь, что хоть стой хоть падай.
А насколько сложно сделать реалистичный интерфейс, чтобы он работал и был правдоподобным? Вот я и решил это узнать.
И так, задача. Хочу правдоподобный интерфейс операционной системы, в которой:
можно залогиниться
есть рабочий стол с иконками программ
есть панель задач с открытыми программами, чтоб переключаться между ними
все программы открываются в окнах, которые можно сворачивать, разворачивать, менять размер и таскать по экрану как в windows
И есть стандартные для любого ПК программы:
проводник
браузер
почтовый клиент
мессенджер аля телеграм
просмотрщик различных файлов
терминал, чтобы какие-то команды вводить, мыж «хакеры»
что-то еще специфическое типа какой-нибудь БД с карточками, представляющими ценность и т.д.
По ходу решения такой задачи начинаешь задумываться об огромном количестве тонкостей в поведении интерфейса, например:
при двойном клике на заголовок окна оно разворачивается на весь экран, а если уже было развёрнуто то сворачивается до предыдущего размера
при клике на иконку в панели задач окно поднимается на передний план поверх остальных и становится активным, а если оно уже было активным, то наоборот минимизируется
интерфейс самой программы внутри окна должен подстраиваться под любой его размер не только по ширине, но и по высоте, чтобы элементы управления не скрывались никогда
в терминале есть история команд и если нажимать вверх, то появляется то, что вводил ранее
при отправке сообщения в чат происходит прокрутка до самого низа сообщений, а при нажатии ctrl+enter сообщение не отправляется а переводит каретку на новую строку
при нажатии любой ссылки в любом месте системы (например в тексте письма в почтовом клиенте) должен открыться браузер с этим адресом
у браузера есть история, чтобы можно было нажать назад и вернутся на предыдущую страницу
Продолжать можно бесконечно на самом деле, а все что я перечислил для нас настолько привычное и обыденное поведение, что мы про это даже не задумываемся. Но кто-то когда-то это придумал впервые и реализовал.
Ну ладно, от слов к делу. Получилось у меня SPA на Vue.js конечно же (никогда не перестану петь ему дифирамбы). Все данные: дерево папок и файлов, почтовые сообщения, переписки, вебсайты со своими страницами, которые можно найти через поисковик в браузере и т.д. хранит и отдает Vuex. Каждая встроенная программа это отдельный компонент.
Все окна таскаются и ресайзятся и в целом ведут себя точно так же как в windows за исключением того, что я не делал прилипания на половину и четверть окна, это тоже возможно, но пока лень. Интерфейсы отдельных программ адаптивные и перестраиваются при ресайзе мгновенно. Спасибо новой технологии media контейнеров и flex-м в css, даже не пришлось писать костыли. Однако для обработки события ресайза и запоминания координат окон пришлось таки дергать ResizeObserver, Vue его нативно не умеет ловить через v-on.
Интересно было эмулировать поведение адресной строки браузера, в которую действительно можно вбить адрес и даже с get параметрами и это работает.
Каждая команда терминала это отдельный метод в компоненте Vue для гибкости и потенциально их может быть сколько угодно.
В браузере сделал поисковик, который ищет по содержимому «сайтов» и даже ранжирует результаты поиска по количеству повторяющихся в тексте слов (чем больше, тем выше результат).
Весь интерфейс выдержан в едином минималистичном стиле, а иконки особо не парясь взяты из Google Fonts. Разумеется визуальное оформление можно поменять очень быстро.
